0
私はsvg -fileを持っています。 css -fileを使用しています。私がこのsvgファイルをブラウザに開くと、それはうまく見えます。ブラウザは適用されません。CSSはimgのソースであるsvgにリンクされています
svg-ファイルのソースがimg -elementのように設定されている場合、html -fileの場合、スタイルは使用されません。私はそれを修正することはできますか？
私はそれがimgの上に置かれたときsvgがhtml -documentのcss -stylesを使用することはできませんが、私の場合には、このcssがhtmlに属していないとsvg直接にリンクされている知っています。
cat.svgファイル：
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="cat.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx='100' cy='100' r='50' class='cat-head'/>
<g id='whisters'>
<circle cx='125' cy='85' r='5' class='cat-eyes'/>
<line x1='100' y1='100' x2='175' y2='85' class='cat-whiskers'/>
<line x1='100' y1='100' x2='175' y2='115' class='cat-whiskers'/>
<polyline points='125 110, 120 120, 100 120' class='cat-mouth'/>
</g>
<use xlink:href='#whisters' transform='scale(-1 1) translate(-200 0)'/>
</svg>
cat.cssファイル：
.cat-head{
stroke: black;
stroke-width: 5px;
fill: #ffcc66;
}
.cat-mouth{
/*stroke: black;*/
fill: none;
}
.cat-eyes{
/*stroke: black;*/
fill: green;
}
.cat-whiskers{
/*stroke: black;*/
}
#whisters{
stroke: black;
}
結果：
index.htmlファイル：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'/>
<title>Sandbox</title>
</head>
<body>
<img src='cat.svg'/>
</body>
</html>
結果は：
@AbhishekPandeyを、あなたは私の質問（と回答）は同じではありません、右ではありません。 –