0

我在标记中使用了内联 SVG 图标(只是一个简单的勾号)。原因是,根据我从服务器获得的数据,我需要更改fill图标的颜色。img当需要它作为css或标签中的图像时,我无法做到这一点。到目前为止,这是我拥有的标记:

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

和 CSS:

.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;
}

这样,无论是否支持 SVG,都将请求图像。所以我想知道是否有任何方法可以将图标显示为 SVG 并仅在不支持 SVG 的情况下请求 png 图标。

顺便说一句,我使用的图片大小没有,但我在带有 JS 框架的组件中使用它。因此,每次在我的应用程序中创建组件时,它都会发送对 png 文件的请求,这让我很困扰。

4

0 回答 0