欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SVG图形的简单修改

程序员文章站 2022-06-19 10:45:53
svg格式的图片是一种矢量图片,最近我就喜欢使用这种图片在做html的元素。网上也有很多现成的svg图片,比如:http://www.sfont.cn这个网站,就能很快的找到各种您想要的图片。但是下载下来以后,发现想你要在html中用的样式和您下载的样式有区别,比如要修改一下方向和颜色。 fill= ......

svg格式的图片是一种矢量图片,最近我就喜欢使用这种图片在做html的元素。网上也有很多现成的svg图片,比如:http://www.sfont.cn这个网站,就能很快的找到各种您想要的图片。但是下载下来以后,发现想你要在html中用的样式和您下载的样式有区别,比如要修改一下方向和颜色。

fill='green'是用来填充颜色的(更改颜色);
transform="rotate(-135 500 500)"是用来旋转svg图形的
修改颜色的好说,放在对应的标签中即可。但是旋转需要放在svg绘制的标签中,如果放在其他位置,后面的两个参数是需要手动计算的。但是如果放在绘制svg的标签中,就不需要了,直接按照中心旋转就是了。
比如下面这个例子,svg的大小是1000*1000,那么后面的两个参数可以直接是500,500
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.sfont.cn -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" >
<g><path  fill='green' transform="rotate(-135 500 500)" d="M520.6,10c0,249.2,0,498.4,0,757.7c40.3-15.7,75.6-29.4,111.2-43.3C584.9,818,540.2,907.3,498.8,990c-40.9-83.2-85-172.9-130.6-265.6c30,12.2,61.4,24.9,109.1,44.3c0-258.4,0-508.5,0-758.7C491.7,10,506.1,10,520.6,10z"/></g>
</svg>

SVG图形的简单修改