javascript - 在不同页面上使用不同颜色更改 SVG 填充参数

Question

我根据我所在的页面类更改 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"/>

链接:http://codepen.io/NGrdanjski/pen/jAKEPJ

谢谢。

Answer 1

您可以使用 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>

http://jsbin.com/moxezu/edit?html,css,output