[SVG] Simple introduce for SVG
Just like create html page, you can create a svg tag by:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="340" width="340" style="background-color:#F6F7F7;"> </svg>
Inside svg,
- x,y: control the position of element
- fill: control the color of element
- height, width: you know
Simple example by rect tag:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="340" width="340" style="background-color:#F6F7F7;">
<!-- Chimney -->
<rect height="21" width="14" fill="#FBF6A7" x="98" y="127"/>
<rect height="4" width="20" fill="#E04E27" x="95" y="123"/> <!-- House -->
<rect height="84" width="162" fill="#FBF6A7" x="90" y="198"/>
<rect height="56" width="184" fill="#E04E27" x="80" y="148"/> <!-- Door -->
<rect height="60" width="36" fill="#E04E27" x="153" y="222"/>
<!-- Door handler -->
<rect height="8" width="2" fill="#FBF6A7" x="183" y="252"/>
</svg>

[SVG] Simple introduce for SVG的更多相关文章
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- SVG 2D入门1 - SVG综述
位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG系列教程:SVG简介与嵌入HTML页面的方式
地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...
- react使用引入svg的icon;svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
- SVG Sprite 入门(SVG图标解决方案)
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
- [翻译svg教程]Path元素 svg中最神奇的元素!
先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...
随机推荐
- 第二章 控件架构与自定义控件详解 + ListView使用技巧 + Scroll分析
1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWindow将DecorView作为整个应用窗口的根V ...
- 使用DOM进行xml文档的crud(增删改查)操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
- iOS开发之录音
录音 除了上面说的,在AVFoundation框架中还要一个AVAudioRecorder类专门处理录音操作,它同样支持多种音频格式.与AVAudioPlayer类似,你完全可以将它看成是一个录音机控 ...
- R2:获取一个event_base
原文链接:http://www.wangafu.net/~nickm/libevent-book/Ref2_eventbase.html 创建一个event_base 在你使用任何有意思的Libeve ...
- Input File 表单上传按钮美化
HTML <div class="input-file-button"> 上传图片<input type="file" class=" ...
- phpcms 2008和discuz X3.1实现同步登陆退出论坛(已实现)
网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了. 以下网络上抄 ...
- 一句JS搞定只允许输入数字和字母
一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高.一句代码,不信么?那就看下边代码: <INPUT clas ...
- C程序设计语言练习题1-15
练习1-15 重新编写1.2节中的温度转换程序,使用函数实现温度转换计算. 代码如下: #include <stdio.h> // 包含标准库的信息. float fahrToCelsiu ...
- js中将函数传递给另一个函数的解析(非常容易理解)
$(document).ready(function(){ //JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即 ...
- Swift—默认构造函数-备
结构体和类的实例在构造过程中会调用一种特殊的init方法,称为构造函数.构造函数没有返回值,可以重载.在多个构造函数重载的情况下,运行环境可以根据它的外部参数名或参数列表调用合适的构造函数.默认构造函 ...