0
我有svg
-文件。它使用一些css
-文件。如果我在浏览器中打开这个svg
-文件,那么它看起来很好。浏览器不适用css被链接到svg这是源的img
如果我将我的svg
文件设置为img
-12le-文件的来源,那么我会看到不使用样式。我可以修复它吗?
我知道svg
不能使用html
-document的css
-styles时,它被放置在img
,但对我来说这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,你是不对的,我的问题(和答案)是不一样的。 –