在由IMG标签嵌入的SVG中链接到CSS
我有一个页面，其中包含几个SVG文件。为了同步这些SVG文件的样式，我想创建一个样式表来保存所有样式信息。
然而，当像下面这样包含SVG时，CSS不会被应用。任何人都有解决方案，或者是不可能链接到引用的SVG中的其他（CSS）文件
请参见下面的示例代码。当在浏览器中直接加载< code>pic.svg时，所有样式都被应用，并且可以看到一个绿色矩形。但是当打开< code>page.htm时，看到的只是一个黑色的长方形。因此，显然没有应用任何已定义的样式。
page.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;
}
编辑
从一个短时间内出现在这里的回答中，我得到了这个规范的链接和下面的引用。在我看来，这表明上面的代码应该工作！
嵌入在HTML或XML文档中的独立SVG文档，带有“img”、“object”(HTML)或“image”(SVG)元素
[...]
从您的链接引用"在引用的SVG文档中任何位置定义的样式表（在样式元素或样式属性中，或在与样式表处理指令链接的外部样式表中）适用于整个SVG文档，但不影响引用文档（可能是超文本标记语言或XHTML）。"
共有3个答案
上面的答案很棒。不过，我发现最简单的方法是将原始SVG标签本身嵌入我的网页上。这允许SVG继承在我的页面的CSS中声明的字体系列样式，而不会出现问题...
出于隐私原因，图像必须是独立文件。如果您将样式表编码为数据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有各种在线转换器。
另一种方法是使用
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
这是一个很大的耻辱<代码>
请注意，在我昨晚的测试中，< code >
我不知道为什么
-
我有一个使用< code>jwt进行身份验证的< code>api。我正在为一个< code>vuejs应用程序使用这个api。我试图在应用程序中显示图像，使用 但是需要header，其中包含 。 我可以像这样在浏览器请求中添加标题吗（这里回答的几个问题让我相信这是不可能的）？ 有没有办法（使用js）或者我应该改变＜code＞api＜/code＞本身？
-
问题内容： 是否可以将SVG标记嵌入到ReactJS组件中？ 结果错误： 不支持命名空间属性。ReactJSX不是XML。 什么是最简单的方法。使用React React之类的东西对于我想做的事情来说是过大的。 问题答案： 更新2016-05-27 从React v15开始，React中对SVG的支持与当前浏览器对SVG的支持（接近？）达到100％奇偶校验（源）。您只需要应用一些语法转换就可以使其
-
做这件事最轻的方法是什么。使用像反应艺术这样的东西对我试图做的事情来说是过度的。
-
links标签 这个标签其实就一个循环标签,只是会把友情链接的数据获取出来 | 标签名 | 作用 | 包含属性 | | --- | --- | --- | | links | 生成友情链接 |item | 标签属性: | 标签属性名 | 含义 | | --- | --- | | item |循环变量名,默认为 vo | 生成友情链接 <div class="links"> <links>
-
links标签 这个标签其实就一个循环标签,只是会把友情链接的数据获取出来 | 标签名 | 作用 | 包含属性 | | --- | --- | --- | | links | 生成友情链接 |item | 标签属性: | 标签属性名 | 含义 | | --- | --- | | item |循环变量名,默认为 vo | 生成友情链接 <div class="links"> <links>
-
我希望我放在我的应用程序中的图像占据它的整个空间而不会溢出。这要求图像随窗口宽度改变其大小。 例如，假设我有以下代码： 照原样，图像占据其正常的宽度和高度，在本例中为。我想让它占据它所拥有的整个水平空间，在本例中是整个窗口的宽度。我怎么能那样做？我所知道的那些小的都没有帮助(是静态的，依此类推）。