改变svg颜色
莫小刚002 发布于 2023-01-19 13:51我想使用这种技术http://css-tricks.com/svg-fallbacks/并更改svg颜色,但到目前为止我还没有能够这样做.我把它放在css中,但不管是什么,我的形象总是黑的.我的代码:
.change-my-color {
fill: green;
}
-
我遵循的步骤更改任何SVG的颜色:
首先,使用img标签添加SVG图像
<img src="dotted-arrow.svg" class="filter-green"/>使用以下Codepen(单击此处打开codepen)将任何HEX颜色代码转换为过滤器:
例如,#00EE00的输出是
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);创建一个新类并将此过滤器添加到此类中.
.filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }现在将此类添加到图像标记中,SVG的颜色将更改为我们提供的HEX.
2023-01-19 13:52 回答
117061771_af0556 -
要简单地更改svg的颜色：
转到svg文件，然后在样式下，提及填充颜色。
<style>.cls-1{fill:#FFFFFF;}</style>2023-01-19 13:52 回答
Matherslll_493 -
要更改任何SVG的颜色,您可以通过在任何文本编辑器中打开svg文件来直接更改svg代码.代码可能类似于下面的代码
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g> <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/> /*Some more code goes on*/ </g> </svg>您可以观察到有一些XML标签,如路径,圆形,多边形等.在那里你可以借助style属性添加自己的颜色.请看下面的例子
<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/>将style属性添加到所有标记,以便您可以获得所需颜色的SVG
2023-01-19 13:53 回答
H-蔡鸿晖_515 -
只有带路径信息的SVG.你不能对图像这样做..作为你可以改变strock和填充信息的路径,你就完成了.喜欢Illustrator
所以:通过CSS你可以覆盖路径
fill值path { fill: orange; }但是如果你想要更灵活的方式,因为你想要在有一些悬停效果的情况下用文本更改它..使用
path { fill: currentcolor; }body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; }<div class='parent'> <span>TEXT WITH SVG</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"> <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path> </svg> </div>2023-01-19 13:53 回答
手机用户2502934787 -
您不能以这种方式更改图像的颜色.如果您将SVG作为图像加载,则无法在浏览器中更改使用CSS或Javascript显示的方式.
如果你想改变你的SVG图像,你必须用它来装载
<object>,<iframe>或使用<svg>在线.如果要使用页面中的技术,则需要Modernizr库,您可以在其中检查SVG支持并有条件地显示或不显示后备图像.然后,您可以内联SVG并应用所需的样式.
见:
#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); }<svg viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/> </svg> <image class="my-svg-alternate" src="ppngfallback.png" />2023-01-19 13:53 回答
竹林映uj -
最简单的方法是使用https://icomoon.io/app/#/select等服务从SVG创建字体.上传你的SVG,点击"生成字体",包括字体文件和css到你身边,只需使用和任何其他文本样式.我总是这样使用它,因为它使造型更容易.
编辑:正如文章中提到的@ CodeMouse92图标字体搞砸了屏幕阅读器(并且可能对SEO不利).所以要坚持使用SVG.
2023-01-19 13:53 回答
旻昊厉害_720 -
添加了测试页面 - 通过过滤器设置为SVG着色:
例如
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)上传和着色您的SVG - Jsfiddle
接受了这个想法:https://blog.union.io/code/2017/08/10/img-svg-fill/
2023-01-19 13:53 回答
Ken張創彬 -
如果您使用一些技巧，则可以使用CSS更改SVG着色。我为此写了一个小脚本。
浏览具有svg图像的元素列表
将svg文件加载为xml
仅提取svg部分
改变路径的颜色
用修改后的svg替换src作为内嵌图像
$('img.svg-changeable').each(function () { var $e = $(this); var imgURL = $e.prop('src'); $.get(imgURL, function (data) { // Get the SVG tag, ignore the rest var $svg = $(data).find('svg'); // change the color $svg.find('path').attr('fill', '#000'); $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML'))); }); });上面的代码可能无法正常工作，我已经为具有svg背景图片的元素实现了此功能，其工作原理与此相似。但是无论如何，您都必须修改此脚本以适合您的情况。希望能有所帮助。
2023-01-19 13:54 回答
静-静-静距离
京公网安备 11010802041100号