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

Change SVG fill parameter with different color on different pages

本文关键字：SVG 参数 颜色 填充      更新时间：2023-09-26

悬停我更改SVG填充参数取决于我是哪个页面类。

例如：如果我在有类.home-page的首页上，我想用#000000填充我的参数。

当我在有类的联系人页面上时，我想用#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

谢谢。

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

您可以为此使用CSS。

.homepage .mycircle
{
  fill: red;
}
.otherpage .mycircle
{
  fill: green;
}
<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>

相关文章：