用html制作一朵花,SVG画图功能:svg实现画出一朵花(附代码)
本篇文章给大家带来的内容是关于SVG画图功能:svg实现画出一朵花(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
标记和 SVG 以及 VML 之间的一个重要的不同是, 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
一、创建一个 XXX.svg文件(该文件,创建了一个红色的圆)<?xml version="1.0" standalone="no"?>
/p>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
stroke-width="2" fill="red"/>
SVG使用XML编写,并保存为.svg文件。该.svg文件必须在.html文件中被引用
二、svg in HTML
1)使用标签:被所有主流的浏览器支持,并允许使用脚本
注释:当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 。任何 HTML 规范中都没有 标签。
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
pluginspage: 指向下载插件的url
2)使用object标签:html4的标准标签,被所有较新的浏览器支持,不允许使用脚本
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
codebase:指向下载插件的url
3)iframe标签:(推荐)
三、SVG的形状
1、矩形
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
style 属性用来定义 CSS 属性
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
2、圆形
3、椭圆
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
这里的椭圆只有一个圆点( 数学的椭圆通常说有两个焦点 )
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径(通过两个焦点的线的一半)
ry 属性定义垂直半径
4、线条
5、多边形
6、折线
7、路径
在标签中,如果都在一个位置上,后边的形状会覆盖前面的形状
小花的代码
flower.svg<?xml version="1.0" standalone="no"?>
/p>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
style="stroke:rgb(100,55,69);stroke-width:2"/>
style="fill:lime"/>
style="fill:lime"/>
index.html
Title
效果图
虽然丑了些,总体还是一朵花啦!嘻嘻
总体来说,svg就是用来画图的,还可以将各种图形叠加,形成你自己的图
相关文章推荐:
HTML标签:img标签的用法总结
svg中元素的使用及marker属性的介绍
svg如何实现坐标系统变换(附代码)
用html制作一朵花,SVG画图功能:svg实现画出一朵花(附代码)相关推荐
- python plot画图_1. 用Python画出漂亮的图表
Python 非常简单而又非常强大,它的功能之一就是画出漂亮的图表,实现数据的可视化.在 Matplotlib 帮助下,它能画出多种图表.下面是 Matplotlib 的部分例子. 怎么样?很强大吧! ...
- java线程画动图闪,Android中利用画图类和线程画出闪烁的心形,android心形,package com....
Android中利用画图类和线程画出闪烁的心形,android心形,package com.package com.tt.view;import android.content.Context;imp ...
- 【企业资源计划ERP】,描述该供应商背景;阐述其ERP产品的各项功能,并画出功能结构图;阐述其产品特点及适用行业(至少3个),并针对每个行业至少举出一个具体的案例。
<企业资源规划(ERP)>课程实验第 1 次实验报告 实验内容及基本要求: 实验项目名称:ERP软件操作 实验类型: 验证 每组人数: 1 实验内容及要求: 结合教材课后上机练习题(P25 ...
- 情人节,教大家使用CSS画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...
- python : 利用turtle 画出一朵花 红花绿叶!
别处看到的,直接给出源码! 我的Python3以上版本: # -*- coding: cp936 -*-import turtleimport mathdef p_line(t, n, length, ...
- android使用动画画心形,Android中利用画图类和线程画出闪烁的心形,送给亲爱的他(她)...
本文讲解主要涉及的知识点: 1.线程控制 2.画图类 3.心形函数 大家先看图片: 因为前一段时间在写画图类,刚好有一个线程控制画图闪烁的,我就想说我能不能做一个心形闪烁的,出来的效果就如图,先贴再讲 ...
- 怎么制作地图分布图,如何在地图上画出区域
连锁门店.餐饮店铺的选址通常要考虑很多空间因素,使用地图可以将客流量.单平方容纳量等指标直观的展示,是进行市场规划的很好的方式.这类地图的做法是根据数据的大小,在对应的区域添上不同的颜色,或者不同程度 ...
- php制作奥运五环颜色代表的洲,HTML5 画出奥运五环效果
html部分canvas代码: Your browser does not support the canvas element. JS部分代码: var c = document.getElemen ...
- python简单代码画图-Python竟能画这么漂亮的花,帅呆了(代码分享)
阅读本文大概需要3分钟 关于函数和模块讲了这么久,我一直想用一个好玩有趣的小例子来总结一下,同时也作为实战练习一下. 趣味编程其实是最好的学习途径,回想十几年前我刚毕业的时候,第一份工作就给手机上写a ...
最新文章
- 走进云计算与虚拟化的底层核心
- 背景图自适应屏幕居中显示,且不变形
- 一天中每个小时段我都起来过,都睡过。
- erhai系统使用_web
- 2020年日历_2020年《故宫日历》发布 纪念紫禁城建成六百年
- 程序员最担心,在乎的几个问题!论12年的职业生涯,能给我带来什么!
- 人工神经网络之BP神经网络模型
- 基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台(二)
- 三十六、【减小apk包的体积】
- python编辑器中文字体倒立的_matplotlib的安装和允许中文及几种字体
- windows使用markdown离线编写文章(可设置图床)
- 图片批量重命名编号不要括号
- _initialize() 区别 __construct()
- 回文数,用scratch编程实现回文数
- 跨专业考计算机哪个专业好考吗,考研常识:跨专业考研好考专业?
- LeetCode - #79 单词搜索(Top 100)
- Typora 常用快捷键使用汇总
- 联想小新java,联想小新笔记本怎么样 小新笔记本介绍【图文】
- 【深度学习】图网络——悄然兴起的深度学习新浪潮
- Photoshop 暂存盘已满(CC2017)