我有一个包含元素的 polymer Web 组件。此元素通过 CSS (.example:before) 附加了一个 SVG 背景图像。问题是 SVG 未显示。它适用于标准 HTML 页面,但不适用于 polymer 元素。我通常会避免在 CSS 中嵌入 SVG。但是,我们正在使用由库使用 javascript 创建的 VideoJS(这不是可选的)和样式控件(添加图标)。
使用 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>
任何解决方案、变通方法或替代方法将不胜感激。
谢谢,伊万
我想补充一点,SVG/CSS 似乎已被浏览器更改。
来自(在 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>');
到(浏览器输出):
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>');
最佳答案
URL 无效,因为 # 字符表示片段标识符的开始。您需要将 # 个字符编码为 %23。
您可能会发现简单地对整个 URL 进行 base64 编码更简单、更容易。
关于html - 作为 CSS 背景图像的 polymer SVG 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27104167/