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

Popular posts from this blog

mysql - BLOB/TEXT column 'value' used in key specification without a key length -

c# - Using Vici cool Storage with monodroid -

python - referencing a variable in another function? -