Question

我有svg - 档案。它使用了一些css - 文件。如果我在浏览器中打开此svg - 文件，那么它看起来很好。

如果我将svg - 文件设置为我的img文件的html - 元素的来源，那么我会看到不使用这些样式。我能解决吗？

我知道svg无法使用css - html的样式 - 文档放在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>

结果：

Answer 1

object元素解决了我的问题：

<object type='image/svg+xml' data='cat.svg'></object>

浏览器不适用css链接到svg，它是img的源码

1 个答案: