有没有可能拥有相同的svg，但具有不同的文本？
有没有可能拥有相同的svg，但具有不同的文本？
提问于 2016-08-13 05:17:50
例如，我想创建一个菜单，但我使用的不是css按钮，而是将其作为对象添加的SVG。我添加了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>回答 1
Stack Overflow用户
发布于 2016-08-13 06:22:00
嗯，你可能可以(例如，使用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元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38926594
复制相关文章
相似问题
腾讯云开发者
