CODEWITHSUNDEEP
htmlcsssvgpolymer
ewan
ewan

Reputation: 474

Polymer SVG as CSS background-image not working

I have a polymer web component that contains an element. This element has a SVG background-image attached to it via CSS (.example:before).The issue is that the SVG is not displaying. It works on a standard HTML page but not when inside a polymer element. I would normally avoid an SVG embedded in the CSS. However, we are using VideoJS (this is not optional) and styling controls (adding icons) that are created by the library with javascript.

Is there an issue with SVG's in CSS with Polymer/Shadow Dom?

Example below:

 <polymer-element name="example-element">
    <template>

        <style>
            .example :before {
                background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#ffffff" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 40%;
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>

        <div class="example"></div>
    </template>
</polymer-element>

Any solutions, workarounds or alternative methods would be appreciated.

Thanks, Ewan

I would like to add a note that the SVG/CSS seems to be altered by the browser.

From (in the CSS):

background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#000000" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>');

To (output by the browser):

background-image: url('data:image/svg+xml;utf8,<svg version=1.1 fill=#000000 id=Layer_1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=34.004px height=36.871px viewBox=0 0 34.004 36.871 enable-background=new 0 0 34.004 36.871 xml:space=preserve><path d=M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871/></svg>');

Upvotes: 1

Views: 680

Answers (2)

Heidi
Heidi

Reputation: 51

I wrestled with this problem for a long time and the problem ended up being that I needed to URL encode my quotes...

" -> %22

' -> %27

Notice how in your "To (output by the browser):" all of the quotes have been removed? For me it wouldn't work without the quotes, and then when I encoded them it magically started working again.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

The URL is invalid as a # character indicates the start of a fragment identifier. You need to encode # characters as %23.

You may find simply base64 encoding the entire URL is simpler and easier.

Upvotes: 1

Related Questions