SVG图形的简单修改

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>

原文地址:https://www.cnblogs.com/wdbim/p/9090338.html

时间: 2024-10-15 09:34:58

SVG图形的简单修改的相关文章

Html5添加块级元素转换为不同形状的SVG图形的jquery插件教程

一.使用方法 使用该SVG图形jQuery插件要引入jQuery和shapeshifter.js文件. <script src="jquery.min.js"></script> <script src="scripts/shapeshifter.js"></script> 二.初始化插件 可以在任何一个<div>元素上调用该SVG图形插件.(最好是在<div>元素元素上使用该插件). $('S

SVG图形引用、裁切、蒙版

SVG图形引用.裁切.蒙版,使用三个标签: 1. <use>标签创建图形引用 2. <clipPath>标签裁切图形 3. <mask>标签创建蒙版  <use>标签 <use>标签使用URI引用一个<g>,<svg>或其他具有一个唯一的ID属性和重复的图形元素.复制的是原始的元素,因此文件中的原始存在只是一个参考,原始影响到所有副本的任何改变. <use>标签,使用xlink:href属性引用图形

简单修改cramfs

首先进入root用户,确保LINUX系统下装有cramfsprogs,没有的话get-apt install cramfsprogs, 找到.cramfs文件,输入命令cramfsck -x song xxx.cramfs,然后当前目录下就会出现一个叫song 的目录,进入找到要修改的东西修改,如果有解压包记得打包解包的命令并且不要打包的时候打包错了, 最后回到song 的当前目录下,输入命令mkcramfs song song.cramfs,就制作出了自己要的CRAMFS文件系统了. 简单修改

SVG实战开发学习(五)——装饰SVG图形

之前介绍过<defs>元素,它允许我们自定义图形元素.在本章中将要使用这个元素来定义SVG图形的色彩渐变.模式填充.剪裁和遮罩,还将介绍如何在svg中使用css样式表. [色彩渐变] svg中有两种色彩渐变:线性渐变和反射渐变.它们的渐变格式都被定义在<defs>元素中,然后在需要的SVG图元中引用它. 线性渐变——是沿着直线方向的色彩渐变过度,使用<linearGradient>元素来定义. 基本属性: id="GradientName":<

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

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载. 最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能.本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字

简单修改gem5的默认例子hello world

陆续写些关于新书<自己动手写CPU>的博客,本篇主要是讲解简单修改gem5的默认例子hello world gem5默认的例子是hello world,在tests/test-progs/hello/src文件夹下,内容如下: #include <stdio.h> int main() { printf("Hello world!\n"); } 修改为如下: #include <stdio.h> int main() { printf("H

HTML5 SVG图形轮廓线条绘制动画插件-vivus

Vivus是一款可以执行SVG路径动画的轻量级Javascript库.Vivus可以绘制SVG图形的外观.通过该svg路径动画插件,你可以使用同步或异步的方式来执行SVG图像路径的动画.Vivus提供各种不同的动画参数来让你定制你自己的SVG路径动画.类似的动画效果还有:html5 svg线条动态绘制文字轮廓边框动画 和 html5 svg线条动态绘制iphone边框动画效果. 在线演示:http://www.htmleaf.com/Demo/201501261280.html 下载地址:htt

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

CentOS7系统如果用mini镜像安装或者服务器版本安装,默认是没有安装图形界面的.如果需要额外去安装图形界面,可以手动来安装CentOS Gnome GUI包.然后会总结一下,在CentOS7系统中的系统运行级别的设置以及如何切换. 命令行下安装 Gnome 包 yum?groupinstall?"GNOME?Desktop"?"Graphical?Administration?Tools" 更新系统的默认运行级别 如果你想在系统下次启动的时候自动进入图形界面,

Java界面编程-建立一个可以画出图形的简单框架

引子:总共使用3个.java文件,建立一个简单界面编程的框架. 第1个文件:NotHelloWorldComponent.java //NotHelloWorldComponent.java 1 import java.awt.*; 2 import java.awt.geom.*; 3 import javax.swing.*; 4 5 public class NotHelloWorldComponent extends JComponent { 6 public static final