css 我无法更改SVG Sprite的填充颜色

niwlg2el  于 2023-10-21  发布在  其他
关注(0)|答案(7)|浏览(155)

我有这个pen,我在这里做了一个SVG Sprites技术的例子:
我想用CSS来实现这一点:

.circle {
    fill: #f00;
}
.polyline {
    fill: #00f;
}
<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
        <symbol viewBox="0 0 64 64" id="circle">
            <title>circle</title>
                <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
        </symbol>
        <symbol viewBox="0 0 56.983 64.804" id="polyline">
            <title>polyline</title>
                <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
        </symbol>
    </svg>

    <svg class="circle">
        <use xlink:href="#circle"></use>
    </svg>

    <svg class="polyline">
        <use xlink:href="#polyline"></use>
    </svg>

我的问题是,我不能改变填充颜色的元素添加到spritesheet。我一直在寻找关于如何正确地做到这一点的信息,我认为我的方法是正确的,但它似乎不是这样的。
在另一个pen中,以我认为相同的方式编写,工作正常。我做错了什么?
对不起,我的英语,如果我犯了任何错误,这不是我的母语。

2w2cym1i

2w2cym1i1#

你必须删除填充属性的内部样式,只应用css属性。无论哪种方式,都可以使用JavaScript DOM更改svg的fill属性。

6uxekuva

6uxekuva2#

下面是一个工作示例:http://codepen.io/anon/pen/NqmrOR
问题是fill="#1D1D1B"属性直接放置在SVG元素上。

注意:在SVG元素上使用CSS类选择器,虽然大多数最新的浏览器都支持,但并不是普遍支持。在JS中以编程方式将样式应用于SVG元素实际上得到了更好的支持。

n53p2ov0

n53p2ov03#

当使用命令<use xlink: href =" # circle "> </use>时,SVG元素的内容将转到Shadow DOM
因此,无法使用外部CSS更改样式
解决此问题的方法是使用强制继承继承

polyline, path {
fill:inherit;
stroke:inherit;
}

你可以在这篇文章中阅读更多:Styling SVG Content with CSS

polyline, path {
fill:inherit;
stroke:inherit;
}
 .circle {
fill:yellowgreen;
} 
 .circle:hover {
fill:red;
} 

.polyline {
fill:gold;
}

.polyline:hover {
fill:red;
}
<svg  xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
    <symbol viewBox="0 0 64 64" id="circle">
        <title>circle</title>
            <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
    </symbol>
    <symbol viewBox="0 0 56.983 64.804" id="polyline">
        <title>polyline</title>
            <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
    </symbol>
</svg>

<svg class="circle">
    <use  xlink:href="#circle"></use>
</svg>

<svg class="polyline">
    <use  xlink:href="#polyline" ></use>
</svg>
pu3pd22g

pu3pd22g5#

以防有人对SVG图标有CSS样式问题。是这样的:

<svg width="28" height="26" viewBox="0 0 28 26" xmlns="http://www.w3.org/2000/svg">
   <path d="M27.333..../>
</svg>

样式应用于内部 * path * 元素,而不是直接应用于svg。正确的造型:

svg path {
   fill: #FFFFFF;
}
roejwanj

roejwanj6#

在我的情况下,我需要删除内部风格的svg文件(如sprite.svg)像这样,然后添加样式内正常的CSS文件

<g fill="rgb(0,0,0)">

//删除fill =“rgb(0,0,0)”,然后在css文件中添加您的样式

</g>
nwwlzxa7

nwwlzxa77#

引用一个类,添加到svg标签上,并定位路径,改变css文件中的颜色。
例如

.logoSvg path {
  fill: var(--green-text-colour);
}

一次到达所有svg

svg path {
  fill: var(--green-text-colour);
}

相关问题