I have svg-file. it uses some css-file. If I open this svg-file in a browser then it looks fine.
If I set my svg-file like the source for the img-element of my html-file then I see that styles are not used. Can I fix it?
I know svg cannot to use the css-styles of html-document when it is placed on the img, but in my case this css is not belong to html and is linked to svg directly.
cat.svg file:
<?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 file:
.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;
}
result:
index.html file:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'/>
<title>Sandbox</title>
</head>
<body>
<img src='cat.svg'/>
</body>
</html>
result:
