我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。
我的代码:
.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >
当前回答
如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:
背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);
当然，替换…使用您的内联图像代码。
其他回答
如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:
背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);
当然，替换…使用您的内联图像代码。
Method 1 The easy and effect way: Open your .svg file with any text editor <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526; fill: rgb(109, 248, 248);" xml:space="preserve"> <svg /> Give an style attribute and fill that with color. Another way Fill with color in your shape. Here i have rect shape fill="white". <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/> </g> </g> </svg>
带有背景色的框元素上的SVG掩码将导致:
body{ overflow:hidden; } .icon { --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; } .icon-bike { background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); } @keyframes frames { 0% { transform:translatex(100vw) } 25% { background: red; } 75% { background: lime; } 100% { transform:translatex(-100%) } } <i class="icon icon-bike" style="--size:150px"></i>
注意- Internet Explorer浏览器不支持SVG掩码
我的用法是引导图标，复制您的SVG路径。
span{
path{
color: red;
}
}
SVG引导的一个例子:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
<path
d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
<path
d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
</svg>
我添加了一个测试页面-通过滤镜设置为SVG着色:
例如,
滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)
上传和着色您的SVG - Jsfiddle
我的想法来自:在图像标签SVGs上交换填充颜色
