1つのシンボルsvgから<use>タグに異なるCSSを適用しますか？

Question

私は赤で#firstアイコンを着色する必要がある。この

<svg style="display: none"> 
 
    <symbol id="icon-check-mark-3" viewBox="0 0 200 200"> 
 
    <title>check-mark-3</title> 
 
    <path fill="#fcc083" class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path> 
 
    </symbol> 
 
</svg> 
 

 

 
<p id="first">my first image 
 
    <use xlink:href="#icon-check-mark-3"></use> 
 
    </svg> 
 
</p> 
 

 
<p id="second">my second image 
 
    <use xlink:href="#icon-check-mark-3"></use> 
 
    </svg> 
 
</p>

などのSVGのアイコンを定義しました。

私はこれを行う方法を見つけるのにほぼ2時間を費やしましたが、私はできません。

Answer 1

最初に、段落に開始タグ<svg>がありません。第二に、あなたは、あなたがこのようなCSSで各SVGの色を指定することができます、記号を塗りつぶしプロパティを削除する必要があります。

#first svg { 
 
    fill: red; 
 
} 
 
#second svg { 
 
    fill: #fcc083; 
 
}

<svg style="display: none"> 
 
    <symbol id="icon-check-mark-3" viewBox="0 0 200 200"> 
 
    <title>check-mark-3</title> 
 
    <path class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path> 
 
    </symbol> 
 
</svg> 
 
<p id="first">my first image 
 
    <svg> 
 
    <use xlink:href="#icon-check-mark-3"></use> 
 
    </svg> 
 
</p> 
 

 
<p id="second">my second image 
 
    <svg> 
 
    <use xlink:href="#icon-check-mark-3"></use> 
 
    </svg> 
 
</p>

Answer 2

利用フィル= "currentColor "あなたのsvgsにcolor css属性で色を設定します。

.red { 
 
    color: red; 
 
} 
 

 
.green { 
 
    color: green; 
 
} 
 

 
svg { 
 
    width: 12px; 
 
    height: 12px; 
 
}

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="12" viewBox="0 0 12 12"> 
 
    <path fill="currentColor" id="delete" d="M7.249,5.977 C7.249,5.977 11.863,10.606 11.863,10.606 C11.978,10.724 11.975,10.917 11.856,11.039 C11.856,11.039 11.036,11.877 11.036,11.877 C10.917,11.998 10.726,12.001 10.611,11.883 C10.611,11.883 5.992,7.248 5.992,7.248 C5.992,7.248 1.308,11.850 1.308,11.850 C1.194,11.966 1.005,11.963 0.887,11.843 C0.887,11.843 0.076,11.014 0.076,11.014 C-0.043,10.893 -0.046,10.701 0.069,10.584 C0.069,10.584 4.659,5.977 4.659,5.977 C4.659,5.977 0.069,1.368 0.069,1.368 C-0.046,1.251 -0.043,1.060 0.076,0.939 C0.076,0.939 0.887,0.110 0.887,0.110 C1.005,-0.011 1.194,-0.013 1.308,0.104 C1.308,0.104 5.992,4.704 5.992,4.704 C5.992,4.704 10.611,0.070 10.611,0.070 C10.726,-0.048 10.917,-0.045 11.036,0.076 C11.036,0.076 11.856,0.914 11.856,0.914 C11.975,1.035 11.978,1.230 11.863,1.347 C11.863,1.347 7.249,5.977 7.249,5.977 Z" /> 
 
</svg> 
 

 
<p class="red"> 
 
    <svg> 
 
    <use xlink:href="#delete"></use> 
 
    </svg> 
 
    red 
 
</p> 
 

 
<p class="green"> 
 
    <svg> 
 
    <use xlink:href="#delete"></use> 
 
    </svg> 
 
    green 
 
</p>