在包含HTML的样式SVG与CSS [英] Styling SVG with CSS in the containing HTML
问题描述
我有一个SVG文件包含一个简单的三角形命名。该文件名为indicator.svg：
I have a SVG file containing one simple triangle named. The file is named indicator.svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Scalable Vector Graphic-->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
baseProfile="full">
<polygon points="0,7 7,0 14,7"/>
</svg>
我有一个内置CSS的HTML，试图设置SVG多边形的颜色：
and I have a html with built-in CSS that tries to set the color of the SVG polygon:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.indicator{
fill:blue;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<img class="indicator" src="images/indicator.svg" />
</body>
</html>
但它不会将SVG中的三角形的颜色更改为蓝色。这怎么可以固定？我想要能够从HTML内部选择三角形的颜色，而SVG本身在一个单独的文件中。
But it doesn't change the color of the triangle within the SVG to blue. How can this be fixed? I want to be able to choose the color of the triangle from inside the HTML while the SVG itself is in a separate file.
推荐答案
很明显，为什么这不适合你。 fill CSS属性仅适用于SVG元素，但您尝试将其应用于HTML < img> 元件。可以通过其他方式获得所需的结果：
It is quite obvious why this doesn't work for you. The fill CSS property only applies to SVG elements, but you're trying to apply it to HTML <img> element. The desired result can be reached other ways:
- 使用 true XHTML / xml 或
* / * + xmlMIME类型）然后，您可以混合命名空间并将SVG附加到其中。浏览器对这个解决方案的支持是相当不错的; - 一些较新的浏览器（IE9 +，Firefox 4+，Chrome）允许您在HTML文档中执行相同操作。
- 将样式表链接到SVG文档中：
<？xml-stylesheet type =text / csshref =style.css？>。我个人会这样选择。您将无法直接从HTML文档控制属性值，但不需要更改SVG文件。 - 使用文件将SVG文件附加到HTML文档中
< object>并使用脚本：oObjElem.contentDocument.getElementsByTagNameNS（'http://www.w3.org/2000/svg'，'polygon '）[0] .style.fill ='blue';。
- Use true XHTML (with
application/xmlor*/*+xmlMIME type) in your main document; then, you'll be able to mix namespaces and append SVG into it. The browsers' support for this solution is pretty good; it will work in every browser supporting XHTML and SVG. - Some newer browsers (IE9+, Firefox 4+, Chrome) allow you to do the same even in HTML documents.
- Link a stylesheet into SVG document:
<?xml-stylesheet type="text/css" href="style.css"?>. I'd personally choose this way. You won't be able to control the properties' values directly from HTML document, but you won't be required to change the SVG file. - Append the SVG file into HTML document using
<object>and use scripting:oObjElem.contentDocument.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'polygon')[0].style.fill = 'blue';.
这篇关于在包含HTML的样式SVG与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
