html svg 填充颜色,开发场景: 使用 svg 画图形, 可改变大小, 颜色 html 代码

开发场景: 使用 svg 画图形, 可改变大小, 颜色 html 代码

svg 属性说明: version: 版本号

xmlns : 指定命名空间, 设置规范

viewbox : viewBox="x, y, width, height" // x: 左上角横坐标, y: 左上角纵坐标, width: 宽度, height: 高度. 形象的解释就是: SVG 就像是我们的显示器屏幕, viewBox 就是截屏工具选中的那个框框, 最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示. viewbox,preserveAspectRatio 详解 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

preserveAspectRatio : preserveAspectRatio="xMidYMid meet" xMidYMid 定义 viewbox 怎么和 SVG viewPoint 的对齐方式 (Y 是大写),meet 定义如何维持长宽比. 此处实战要使图形像图片一样直接拉伸, 直接设置为 none 即可.

g 属性说明: stroke : 边框颜色

stroke-width: 边框粗细

fill: 填充颜色

形状说明: 圆形 < circle> cx: 中心点横坐标 cy: 中心点纵坐标 r: 半径

矩形 < rect> width: 宽度 height: 高度 x: 横坐标 y: 纵坐标 rx,ry: 圆角

椭圆 < ellipse > 和圆类似, 但有 rx,ry 分别定义水平半径和垂直半径

线条 < line> x1,y1 定义线条开始的地方 x2,y2 定义线条结束的地方

多边形 < polygon> points 定义每个角的 xy 轴坐标

折现 < polyline> points 定义每个点的 xy 轴坐标

路径 < path> 由于绘制路径的复杂性, 因此强烈建议您使用 SVG 编辑器来创建复杂的图形.

给图形加边框: 给图形加边框 http://www.sohu.com/a/141587436_464084

来源: http://www.qdfuns.com/article/23490/fe047cd4d64fb5651b956d7168fa0b4b.html