Html 如何将颜色渐变应用于.SVG图像?
我已经使用SVG元素和一些CSS成功地实现了SVG渐变,请参见下文。我有一个黑白的.SVG图像,希望将渐变应用到SVG图像的黑色部分 HTMLHtml 如何将颜色渐变应用于.SVG图像?,html,css,svg,Html,Css,Svg,我已经使用SVG元素和一些CSS成功地实现了SVG渐变,请参见下文。我有一个黑白的.SVG图像,希望将渐变应用到SVG图像的黑色部分 HTML <svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> rect{fill:url(#MyGradient)} </style>
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>
有没有办法将其直接应用于我下载的.svg图像?例如,我使用了一个黑白图标
我不确定我看到了什么问题。您只需要编辑文件以获得渐变,并将元素指向渐变。问题是什么?你的意思是用img元素代替rect,将src设置为svg吗?你需要编辑图像元素的内容,即svg文件本身,并将渐变放在其中。您无法应用包含文档的样式。如果使用SVG注入,您可以将SVG保存在单独的文件中,并且仍然应用CSS。看一看或嗨谢谢你的回答。我只有一个带有svg扩展的图像,是否需要将其转换为路径?如果是,你知道怎么做吗?
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: url(#MyGradient);
}