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图形的简单修改的更多相关文章

  1. SVG图形引用、裁切、蒙版

    SVG图形引用.裁切.蒙版,使用三个标签: 1. <use>标签创建图形引用 2. <clipPath>标签裁切图形 3. <mask>标签创建蒙版  ...

  2. 多个SVG图形集成到一个SVG图形上

    SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...

  3. C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形     最近在写WPF界面的时候遇到一个情 ...

  4. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  5. js实现svg图形转存为图片下载[转]

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  6. react使用引入svg的icon；svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  7. R语言的帮助使用和图形功能简单介绍

    R语言的帮助使用和图形功能简单介绍 R语言帮助,在Windows桌面下,有很多种.最长使用的是在命令行下help() > help.start() 会在浏览器中,打开帮助的主页 watermar ...

  8. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  9. CentOS7安装图形界面和修改运行级别

    CentOS7系统如果用mini镜像安装或者服务器版本安装,默认是没有安装图形界面的.如果需要额外去安装图形界面,可以手动来安装CentOS Gnome GUI包.然后会总结一下,在CentOS7系统 ...

随机推荐

  1. java截取字符串

    public class Temp { public static void main(String[] args) { String a="dsadgafa34"; System ...

  2. drupal7 为视图添加 过滤标准 内容类型

    1.单击 FILTER CRITERIA 右边的“添加”按钮 2.在弹出的对话框中输入“类型”,单击搜索结果中的“内容:类型” 3.确定之后,选择需要的内容类型即可,例如添加“书评”内容类型的过滤 4 ...

  3. HTML中的Head标签学习

    在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...

  4. Wasserstein GAN

    在GAN的相关研究如火如荼甚至可以说是泛滥的今天,一篇新鲜出炉的arXiv论文<Wasserstein GAN>却在Reddit的Machine Learning频道火了,连Goodfel ...

  5. Android Editable

    在android的sdk中有讲,“This is the interface for text whose content and markup can be changed (as opposed ...

  6. 深入理解HashMap和concurrentHashMap

    原文链接:https://segmentfault.com/a/1190000015726870 前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇 ...

  7. 初识WCF2

    参照: http://blog.csdn.net/songyefei/article/details/7371571 在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾 ...

  8. mysql错误：Statement violates GTID consistency

    在MYSQL中,执行建表语句时CREATE TABLE  aaaa  AS SELECT * FROM menu;  报: 错误代码: 1786Statement violates GTID cons ...

  9. 使用 docker-machine 管理 Azure 容器虚拟机

    安装 docker-machine 请参见该链接(https://docs.docker.com/machine/install-machine "https://docs.docker.c ...

  10. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...