Question

我有一个含有元素的聚合物网组件。这个元素有一个SVG背景图像通过CSS（.example：before）附加到它。问题是SVG没有显示。它适用于标准HTML页面，但不适用于聚合物元素。我通常会避免在CSS中嵌入SVG。但是，我们使用VideoJS（这不是可选的）和使用javascript由库创建的样式控件（添加图标）。

使用Polymer / Shadow Dom在CSS中存在SVG的问题吗？

以下示例：

 <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>

任何解决方案，变通方法或替代方法都将受到赞赏。

谢谢，Ewan

我想补充说明浏览器似乎改变了SVG / CSS。

From（在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（由浏览器输出）：

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>');

Answer 1

URL无效，因为＃字符表示片段标识符的开头。您需要将＃字符编码为％23。

您可以找到简单的base64编码，整个网址更简单，更容易。

Answer 2

我长时间与这个问题搏斗，问题最终是我需要对我的报价进行URL编码...

＆＃34; - ＆GT; ％22

＆＃39; - ＆GT; ％27

注意你的＆＃34; To（由浏览器输出）：＆＃34;所有报价都被删除了吗？对我而言，没有引号就行不通，然后当我对它们进行编码时，神奇地再次开始工作。

聚合物SVG作为CSS背景图像不起作用

2 个答案: