我有一个页面,其中包含几个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)。"
上面的答案很棒。不过,我发现最简单的方法是将原始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>
我希望我放在我的应用程序中的图像占据它的整个空间而不会溢出。这要求图像随窗口宽度改变其大小。 例如,假设我有以下代码: 照原样,图像占据其正常的宽度和高度,在本例中为。我想让它占据它所拥有的整个水平空间,在本例中是整个窗口的宽度。我怎么能那样做?我所知道的那些小的都没有帮助(是静态的,依此类推)。