Q&A
仮に下記のファイル構造が一つのフォルダに入っているとします。
file
1index.html 2style.css 3union.svg
#####index.htmlの内容
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>experience</title> 6 </head> 7 <body> 8 <img src="union.svg" alt=""> 9 </body> 10</html>
#####union.svgの内容
svg
1<?xml-stylesheet href="style.css" type="text/css"?> 2<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 3 <circle cx="50" cy="50" r="40" stroke="black" class="svg" /> 4</svg>
#####style.cssの内容
css
1.svg { 2 fill: aqua; 3}
このような状態で、まずunion.svgをブラウザで開くと、円がきちんとaquaで塗りつぶされています。
しかし、index.htmlを開くと、円が黒色に塗りつぶされてしまいます。何が原因か全くわかりませんでした。原因と、解決方法を教えてほしいです。
回答1件
0
ベストアンサー
imgではなくobjectで呼び出してみては？
HTML
1<object data="union.svg"></object>
投稿2020/07/12 16:18
総合スコア116734
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/13 00:14