html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
当前回答
在您的案例中,主要问题是您从<img>标记导入svg,该标记将隐藏svg结构。
您需要将<svg>标记与<use>结合使用以获得所需的效果。要使其工作,您需要在SVG文件<path id='myName'…>,然后能够从<use xlink:href="#myName"/>标签检索它们。 试试下面剪的。
.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } <svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>
注意,如果您想从外部源加载SVG(而不是将其嵌入到HTML中),则可以将任何URL放在片段#之前。另外,通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。
其他回答
简单. .
你可以使用下面的代码:
<svg class="logo">
<use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>
首先指定svg的路径,然后写入它的ID,在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。
在css中:
.logo {
fill: red;
}
您可以将SVG设置为掩码。通过这种方式设置背景色将充当填充色。
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
请检查您的浏览器是否支持此功能: https://caniuse.com/#search=mask
因为SVG基本上是代码,所以您只需要内容。我使用PHP来获取内容,但您可以使用任何您想要的内容。
<?php
$content = file_get_contents($pathToSVG);
?>
然后,我已经打印内容“是”在一个div容器
<div class="fill-class"><?php echo $content;?></div>
最后将规则设置为CSS上的容器的SVG子元素
.fill-class > svg {
fill: orange;
}
我用SVG材质图标得到了这个结果:
Firefox 59.0.2(64位)Linux
谷歌Chrome66.0.3359.181 (Build official)(64位)Linux
Opera 53.0.2907.37 Linux
如果你想要一个动态的颜色,不想使用javascript,也不想使用内联SVG,使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge
<svg>
<use href="logo.svg" style="--color_fill: #000;"></use>
</svg>
在SVG中,将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。
编辑您的SVG文件,将fill="currentColor"添加到SVG标记中,并确保从文件中删除任何其他填充属性。
例如:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>
注意,currentColor是一个关键字(不是使用的固定颜色)。
在此之后,您可以使用CSS更改颜色,通过设置元素的颜色属性或从它的父元素。
例子:
.div-with-svg-inside {
color: red;
}
我忘了说,你必须这样插入SVG:
<svg>
<use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>
如果image来自某个变量,那么
<svg>
<use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>
Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.
Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]
[1]: https://css-tricks.com/cascading-svg-fill-color/