在不同页面上更改不同颜色的SVG填充参数

Question

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

谢谢。

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

Answer 2

您可以使用CSS。

＆＃13;

＆＃13;

.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;

＆＃13;

＆＃13;