0

For example, I want to create a menu, but instead of css buttons, I'm using a SVG which I add it as an object. I add it 4 times (e.g. Home, Store, About, Contact). So: 4 objects, same SVG button. Is it possible to add text for each button if I'm using only one SVG file?

HTML

<div id="first">
  <div>
    <object data="skillItem.svg" class="skillItemSVG" type="image/svg+xml"></object>
  </div>
</div>

CSS

#first  skillItemSVG:before { content: "Home"; }

SVG file skillItem.svg

<svg version="1.1" id="skillItem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="120px" height="90px" viewBox="0 0 120 90" enable-background="new 0 0 120 90" xml:space="preserve">
    <defs>
        <style type="text/css">
            #skillTagBg {
                opacity: 0;
            }

            .hoverItem {
                transition: 0.3s ease-out;
            }

            a {
                cursor: pointer;
            }

            a:hover .hoverItem {
                fill: #a8d500;
            }
        </style>
    </defs>
    <a href="#">
        <path class="hoverItem" id="skillTag" fill="#ADADAD" d="M108,0H0v55h120V12L108,0z M119,54H1V1h106.2L119,12.6V54z"/>
        <g id="SkillButton">
            <path class="hoverItem" id="button" fill="#ADADAD" d="M115.3,90H4.7C2.1,90,0,87.9,0,85.3V64.7C0,62.1,2.1,60,4.7,60h110.6c2.6,0,4.7,2.1,4.7,4.7
        v20.6C120,87.9,117.9,90,115.3,90z"/>
        </g>
        <polygon id="skillTagBg" fill="#ADADAD" points="1,1 1,54 119,54 119,12.6 107.2,1 "/>
    </a>
</svg>
tc9
  • 1
  • 1

1 Answers1

0

Well, you probably can (for instance, using CSS content property), but without JavaScript those will be bad solutions. Since you haven't provide your SVG, I'll give you and idea in just XML + CSS and you then can try it with your SVG:

XML (to use semantic tags to illustrate the idea):

<someHtmlWrapper id="first">
    <yourSVG>
        <theButton></theButton>
    </yourSVG>
</someHtmlWrapper>
<someHtmlWrapper id="second">
    <yourSVG>
        <theButton></theButton>
    </yourSVG>
</someHtmlWrapper>

CSS:

#first  theButton:before { content: "Home"; }
#second theButton:before { content: "Store"; }

This is straight-forward: the wrapper id allows you to create a distinct selector, the only question is whether the content property is applicable to the SVG element that you want to fill with text.

YakovL
  • 7,557
  • 12
  • 62
  • 102
  • Sorry for the late respond. Had some things to take care of. So, I tried this:
    And it's not working your way. :(     – tc9 Aug 14 '16 at 18:46
  • @tc9 please show your SVG (probably better in your initial post) and CSS you've tried for this approach – YakovL Aug 15 '16 at 00:54
  • @tc9 right, so your current CSS is not "correct": you have the `skillItemSVG` descendant selector, but you only have an element with skillItemSVG class, hence `.skillItemSVG` is needed. But even that is not good enough: `.skillItemSVG` will select the `object` element while you need to add the text to a certain place in your SVG (inside the polygone above or the rectangle below?). But the approach I suggested may not work anyway: http://stackoverflow.com/questions/31608129/svg-set-text-content-with-css (this needs some more research) – YakovL Aug 16 '16 at 11:41