Hove我根据我的页面类别更改SVG填充参数。
例如:
如果我在首页上有一个班级.home-page
,我想用#000000
填充我的参数。
当我在联系页面上有一个类.contact-page时,我想用#ffffff
填充我的参数。
<rect x="-4.79" y="-5.11" clip-path="url(#SVGID_6_)" fill="#000000" width="37" height="37.03"/>
link:http://codepen.io/NGrdanjski/pen/jAKEPJ
谢谢。
答案 0 :(得分:0)
您可以使用css
更改fill
属性
body {
background:#ddd;
}
.contact-page .circle {
fill:#fff;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logo" x="0" y="0" width="40" height="82" viewBox="0 0 28 60" enable-background="new 0 0 28 60" xml:space="preserve">
<g enable-background="new ">
<defs>
<rect id="SVGID_1_" x="0.21" y="-0.11" width="27" height="60"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<defs>
<ellipse id="SVGID_3_" cx="13.71" cy="13.41" rx="13.5" ry="13.52"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<defs>
<rect id="SVGID_5_" x="0.21" y="-0.11" width="27" height="60"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<rect class="circle" x="-4.79" y="-5.11" clip-path="url(#SVGID_6_)" fill="#000000" width="37" height="37.03"/>
</g>
</g>
</g>
</svg>
</div>
<button onclick="document.querySelector('div').classList.toggle('contact-page')">Toggle .contact-page</button>
答案 1 :(得分:0)
您可以使用CSS。
.homepage .mycircle
{
fill: red;
}
.otherpage .mycircle
{
fill: green;
}
&#13;
<div class="homepage">
<svg>
<circle class="mycircle" cx="75" cy="75" r="75"/>
</svg>
</div>
<div class="otherpage">
<svg>
<circle class="mycircle" cx="75" cy="75" r="75"/>
</svg>
</div>
&#13;