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"/> 

リンク：http://codepen.io/NGrdanjski/pen/jAKEPJ

はありがとうございます。

Answer 1

は、あなたがこのためにCSSを使用することができ、CSS

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

でfillプロパティを変更することができます。

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