Question

例如，我想创建一个菜单，但是我使用SVG代替css按钮，我将其添加为对象。我添加了4次（例如Home，Store，About，Contact）。所以：4个对象，相同的SVG按钮。如果我只使用一个SVG文件，是否可以为每个按钮添加文本？

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文件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>

Answer 1

嗯，你可能（例如，使用CSS content property），但没有JavaScript，那将是不好的解决方案。既然您还没有提供SVG，我会在XML + CSS中为您提供想法，然后您可以使用SVG进行尝试：

XML（使用语义标签来说明这个想法）：

<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"; }

这是直截了当的：包装器ID允许您创建一个不同的选择器，唯一的问题是content属性是否适用于您要用文本填充的SVG元素。

是否可以使用相同的svg但文本不同？

1 个答案: