带png的内联SVG回退
我在标记中使用了一个内联SVG图标(只是一个简单的勾号)。原因是,根据我从服务器获取的数据,我需要更改图标的带png的内联SVG回退,svg,fallback,inline-svg,Svg,Fallback,Inline Svg,我在标记中使用了一个内联SVG图标(只是一个简单的勾号)。原因是,根据我从服务器获取的数据,我需要更改图标的填充颜色。当我需要它作为css中的图像时,我不能这样做 或img标签。到目前为止,这是我的标记: <span class="tick"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-56 1232 9.611 8"> <path id="tick" d="M2787.5,1382.
填充颜色。当我需要它作为css中的图像时,我不能这样做
或img
标签。到目前为止,这是我的标记:
<span class="tick">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-56 1232 9.611 8">
<path id="tick" d="M2787.5,1382.167l.83-.83,1.617,1.617,6.335-6.335.828.828-7.172,7.172Z" transform="translate(-2843.5 -144.619)"/>
</svg>
</span>
这样,无论是否支持SVG,都将需要图像。
因此,我想知道是否有任何方法可以将图标显示为SVG并仅在必要时请求png图标
不支持SVG
顺便说一句,我正在使用的图片没有大小,但我正在JS框架的组件中使用它。所以每次
组件是在我的应用程序中创建的,它发送对png文件的请求,这让我非常困扰。请查看备注中的回退,如果您使用use
引用symbol
元素,则可以设置外部SVG的样式。
.tick {
width: 10px;
height: 8px;
float: left;
margin: 2px;
background: transparent url(../../img/chat/tick.png) center/cover no-repeat;
}
.tick svg {
display: block;
fill: #2196F3;
}