Also published in gist with a link to JSFiddle Stroke: var(-iron-icon-stroke-color, none) įill: var(-iron-icon-fill-color-2, currentcolor) įill: var(-iron-icon-fill-color-x, currentcolor) Īctually, there is a quite more flexible solution to this problem: writing a Web Component which will patch SVG as text in runtime.
Height: 180px /* stackoverflow subwindow height */įill: GREEN /* shadowDOM style does NOT style global DOM */įill: var(-iron-icon-fill-color-1, currentcolor) This.hasAttribute("replaceWith") & this.replaceWith(.shadowRoot.childNodes) childNodes instead of children to include #textNodes also ShadowRoot.append(.this.querySelectorAll("")) append optional Elements from inside after parsed ShadowRoot.innerHTML = await (await fetch(src)).text() load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML If there is no SVG support the SVG block will be ignored and the image will be displayed, otherwise the image will be removed from the DOM tree ( display: none). You can inline your SVG, tag your fallback image with a class name ( my-svg-alternate): Īnd in CSS use the no-svg class from Modernizr (CDN: ) to check for SVG support.
Look at the below example Īdd the style attribute to all the tags so that you can get your SVG of your required colorĮdit: As per Daniel's comment, we can use fill attribute directly instead of fill element inside style attribute
There you can add your own color with help of style attribute. You can observe that there are some XML tags like path, circle, polygon etc. To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor.
0 kommentar(er)
