[解決済み] SVGの塗りつぶし色が効かない
2022-01-31 16:45:27
質問
SVGを使うのは初めてなのですが、ここで何が間違っているのかがわかりません。 ほとんどの場合、私は色を変更したい場合は、使用しています。
svg path {
fill: blue;
}
しかし、この作品や他の作品では、なぜかこの方法はうまくいきません。
HTML
<div class="logo-wrapper">
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="logo-personal-care" width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>
CSS
.logo-wrapper svg {
width: 300px;
}
.logo-wrapper svg path{
fill: green;
}
ありがとうございます。
解決方法は?
を追加するだけです。
!important
塗りつぶしの横に
.logo-wrapper svg {
width: 300px;
}
.logo-wrapper svg path{
fill: green !important;
}
.logo-wrapper svg text{
fill: green !important;
}
これは ヴァイオリン座
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] DjangoのCSSが更新されない
-
[解決済み] HTMLとCSSのBackground-imageが表示されない
-
[解決済み] 高さと幅はspanには適用されないのですか?
-
[解決済み] 入力・テキストフィールドの背景色
-
[解決済み] svg要素の色を変更するには?
-
[解決済み] SVGの塗りつぶし色の透明度/アルファ値?
-
[解決済み] CSSを使用してSVG画像の色を変更する方法(jQuery SVG image replacement)とは?
-
[解決済み] 背景画像として提供されるSVGイメージの塗りつぶし色を変更するには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】display:noneの反対語はあるのか?
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled の開発中。
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] DIVを重ねる?
-
[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法
-
[解決済み] マージン/パディングが機能しない
-
[解決済み] アニメーションディレイが効かない
-
[解決済み] Ionicカードリスト作成
-
[解決済み] 特定のdivを右へ移動させたい