search

PolymerElements / iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg
37 stars 34 forks source link

IE11 iron-iconset-svg defined svg element doesn't link to the class styles. #58

Open zslucky opened 7 years ago

zslucky commented 7 years ago

Description

The iron-iconset-svg defined svg element doesn't link to the class styles on IE11/Edge, when I put a style tag out of g tag and defined some classes, the element in the group seems unaffected. I found a similar issue, please refer to this https://github.com/iconic/SVGInjector/issues/23

Expected outcome

defined classes should affected.

Actual outcome

defined classes unaffected.

Steps to reproduce

  1. define a svg element in iron-iconset-svg.
<iron-iconset-svg name="mea-ai-44" size="44">
    <svg>
        <defs>
            <g id="play">
                <style type="text/css">
                    .st0{fill: #0B9EDA;}
                    .st1{fill: #FFFFFF;}
                </style>
                <path class="st1" d="M17.3 28.4V15.3l13.1 6.5L17.3 28.4zM19 18.1v7.6l7.6-3.8L19 18.1z"/>
                <path class="st0" d="M22 44C9.9 44 0 34.1 0 22S9.9 0 22 0s22 9.9 22 22S34.1 44 22 44M22 2C11 2 2 11 2 22c0 11 9 20 20 20 11 0 20-9 20-20C42 11 33 2 22 2"/>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>
  1. Use it in any html.
<iron-icon icon="mea-ai-44:play"></iron-icon>

you can see the icon is black, because the defined classes unaffected. When I used in-line styles, all correct.

Browsers Affected