Styling SVG with CSS in the containing HTML -
I have a SVG file that has a named triangle named. The name of the file is the indicator name:
& lt ;? Xml version = "1.0" encoding = "UTF-8"? & Gt; & Lt ;! DOCTYPE svg PUBLIC "- // W3C / DTD SVG 1.1 / n" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> & Lt ;! - Scalable Vector Graphic - & gt; & Lt; 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 "& gt; & Lt; Polygon numeral = "0,7 7,0 14,7" /> & lt; / Svg & gt; And I have an HTML in which the built-in CSS tries to set the color of the SVG polygon:
& Lt; Style type = "text / css" & gt; . Indicator {fill: blue; } & Lt; / Style & gt; & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Img class = "indicator" src = "picture / pointer svg" /> & Lt; / Body & gt; & Lt; / Html & gt; But it does not change the color of the triangle inside the SVG into a blue color. How can this be fixed? I want to be able to choose the color of the triangle from within the HTML, whereas SVG is in a separate file.
It is quite clear why it does not work for you fill CSS property is only applicable to SVG elements, but you can call it HTML and lt; Img & gt; - true xhtml (
application / xml < / Code> or * / * + xml mime type) in your main document; So, you can mix namespaces and add SVG to it. Browser support is great for this solution; It will support XHTML and SVG in every browser. - Some new browsers (IE9 +, Firefox 4+, Chrome) allow you to do this in HTML documents as well.
- Link to the stylesheet in SVG document:
. I personally have to choose in such a way that you will not be able to control the values of the property directly from the HTML document, but you will not need to change the SVG file. - SVG file should be entered in the HTML code in
& lt; Object & gt; and use scripting: oObjElem.contentDocument.getElementsByTagNameNS ('http://www.w3.org/2000/svg', 'polygon') [0] .style.fill = 'blue' ; .
Comments
Post a Comment