利用SVG可以实现很多复杂的图形,SVG的功能开发者们已经开发许多,今天初识一下SVG的基本图形绘制,

<svg viewbox="0,0,400,400" style="background: red;" width="400"  height="400">
<circle r="100" cx="200" cy="200" fill="blue" stroke="#f90" stroke-width="10" />
<rect x="200" y="200" width="300" height="300" fill="red" stroke="black" stroke-width="2" rx='10' ry="10" fill-opacity="0.4" transform="translate(-150,-150)" />
<polygon points="10 20,30 20,20 30" fill="#652" stroke="black" stroke-width="2"/>
</svg>
<div class="" id="box"></div>
<script>
window.onload=function(){
var cirle=document.querySelector("circle");
var rect=document.querySelector("rect");
var cx=cirle.getAttribute('stroke');
console.log(cx);
cirle.setAttribute("stroke-dasharray",3+' '+Math.PI*2*100/45)
//打印属性函数;
function message(obj) {
var sm='';
for (var i in obj) {
sm += i +','+ obj[i] + '<br/>';
}
return sm;
}
document.getElementById('box').innerHTML=message(cirle);
} </script>

在上面的代码中,我们可以看到绘制了圆,矩形,多边形,关于这些图形的基本属性在上面的代码已经得到了很好的体现,并且有一个transform属性,这个和CSS3的transform区别不大,唯一需要注意的是css3的transform变换的时候,坐标是基于中心点的,而svg的transform变换的原点是在左上角的;当然这两个变换的原点都是可以重新设定的;

而在JS代码中,我们打印出了svg最基本的属性,打印之后,发现不同的浏览器对SVG的支持并不一致,在firefox和chrome中差别很大;有兴趣的伙伴们可以测试一下;

-------------------------分割线-------------------------

<svg>
<defs>
<clipPath id="clipPath">
<text x="10" y="70" fill="red" style="font-size: 40px;" >我是中国人</text>
</clipPath>
</defs> <g style="clip-path:url(#clipPath)">
<rect x="10" y="30" width="200" height="100" fill="red" />
<circle r="10" cx="110" cy="55" fill="blue" />
</g>
</svg>

在上面的代码中,是关于svg clipPath的,不得不说clippath这个裁剪功能确实强大!!待续....

关于SVG的内容参考,提供以下两个网站:

SVG基本图形及clipPath;的更多相关文章

  1. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  2. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  3. 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址

    多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...

  4. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  5. 理解SVG的图形填充规则

    SVG的图形填充规则通过fill-rule属性来指定. 有效值:   nonzero | evenodd | inherit 默认值:   nonzero fill-rule属性用于指定使用哪一种算法 ...

  6. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  7. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  8. SVG基础图形与参数

    SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...

  9. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

随机推荐

  1. 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(六)-- 依赖注入

    本篇将介绍Asp.Net Core中一个非常重要的特性:依赖注入,并展示其简单用法. 第一部分.概念介绍 Dependency Injection:又称依赖注入,简称DI.在以前的开发方式中,层与层之 ...

  2. DevExpress之ASPxGridView笔记(1)

    1.设置Row(某列)输出格式,例如,在数字前加美元符.每3位以逗号隔开及设置小数点后两位: <dx:GridViewDataTextColumn FieldName="SHOUHUI ...

  3. Cassandra 数据模型 (基于CQL,解决胖列数量限制及灵活性问题)(1.1及以上版本)

    文中主要交代Cassandra的编程模型及数据结构. 由于Cassandra版本数次更新,网上中文的资料已经有点过时,比较有代表性的比如ebuy那篇文章都已经过时了,于是自己找资料,结合官方博客写一篇 ...

  4. mac里边配置android开发环境,intellij开发工具:

    1 在android的官网下载 android sdk的mac版 http://developer.android.com/sdk/index.html  选择mac的版本 下载后打开sdk-mana ...

  5. mysql实体关系(mysql学习五)

    实体关系  表设计 1:1 两个实体表内,存在相同的主键字段 如果记录的主键值等于另一个关系表内记录的主键值,则两条记录的对应为一一对应 优化上称为垂直分割 1:n 一个实体对应多个其他实体(一个班级 ...

  6. C#通过WinAPI获取内存信息,32位64位可用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Runti ...

  7. keytool 获取证书信息

    keytool -list -v -keystore E:\androidkestore 红色部分为证书地址 输入密码后得到md5及sha1 google地图和百度地图申请key可能用到

  8. C#导出GridView数据到Excel文件类

    using System; using System.Web; using System.Web.UI; using System.IO; using System.Web.UI.WebControl ...

  9. jquery 点击页面其他地方实现隐藏菜单功能

    1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...

  10. .NET开源工作流RoadFlow-流程设计-流程步骤设置-数据设置

    数据设置是控制在流程处理过程中,当前步骤的数据显示与编辑状态,控制当前步骤哪些字段为只读,隐藏或可编辑.需要配合表单设计器使用.