19

我有一个页面，其中包含几个 SVG 文件。为了同步这些 SVG 文件的样式，我想创建一个样式表来保存所有样式信息。

但是，当包含如下所示的 SVG 时，不会应用 CSS。任何人都对此有解决方案，或者只是无法链接到引用的 SVG 中的其他（CSS）文件<img src="..." />？

请参阅下面的示例代码。当pic.svg直接在浏览器中加载时，所有样式都会被应用，并且可以看到一个绿色矩形。但是当打开page.htm所有看到的是一个黑色的矩形。所以显然没有应用任何定义的样式。

页面.htm

<!DOCTYPE html>
<html>
<body>
    <img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>

图片.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    >
    <rect x="10" y="10" width="80" height="80" />
</svg>

样式.css

rect { 
    stroke: black;
    fill: green;
}

编辑

从一个答案中，这里出现了很短的时间，我得到了这个规范的链接和下面的引用。在我看来，这表明上面的代码应该可以工作！

嵌入在带有“img”、“object”（HTML）或“image”（SVG）元素的 HTML 或 XML 文档中的独立 SVG 文档

[...]

从您的链接中引用“在引用的 SVG 文档中的任何位置定义的样式表（在样式元素或样式属性中，或在与样式表处理指令链接的外部样式表中）适用于整个 SVG 文档，但不影响引用文档（也许是 HTML 或 XHTML）。”

4

3 回答 3

24

<object>另一种方法是在您的 html中使用标签：-

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

很遗憾<img>标签不起作用。我不想在将 SVG 转换为数据 URI 时弄乱黑客行为。这与间接加载资源和使用“开放重定向器”的跨站点漏洞有关。

请注意，在我昨晚的测试中，<img>标记方法在 IE10 中有效，但在 Chrome 和 FireFox 中均无效。

我不知道为什么<object>允许和<img>不允许。疏忽？

于 2013-08-23T09:24:14.820 回答
12

出于隐私原因，图像必须是独立文件。如果将样式表编码为数据 uri，则可以使用 CSS。例如

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    >
    <rect x="10" y="10" width="80" height="80" />
</svg>

有各种用于数据 URI的在线转换器。

于 2012-09-25T15:09:37.877 回答
0

上面的答案很棒。不过，我发现将原始 SVG 标签本身嵌入到我的网页中是最简单的。这使得 SVG 可以毫无问题地继承在我的页面 CSS 中声明的字体系列样式......

于 2018-06-18T19:00:23.167 回答