当前位置: 首页 > Web前端 > HTML

关于svg

时间:2023-04-02 11:13:55 HTML

最近的项目会用到d3,所以顺便看看他需要的svg。希望对大家有所帮助。什么是SVGSVG是指可缩放矢量图形(ScalableVectorGraphics)。矢量图形SVG使用XML格式来定义图形SVG图像可以按比例放大或调整大小而不会损失图形质量SVG是万维网联盟的标准SVG与W3C标准(如DOM和XSL)集成SVG是W3C的历史和推荐强度SVG2003年1月,SVG1.1被确立为W3C标准。参与定义SVG的组织包括:SunMicrosystems、Adobe、Apple、IBM和Kodak。与其他图像格式相比,使用SVG的优点是:SVG可以通过多种工具(如记事本)读取和修改SVG比JPEG和GIF图像更小且更可压缩。SVG是可缩放的SVG图像可以在任何分辨率下以高质量打印SVG可以在不损失图像质量的情况下放大SVG图像中的文本是可选的,也可以搜索(非常适合创作地图)文件是纯XMLSVG的主要竞争对手是Flash。SVG相对于Flash的最大优势是它与XSL和DOM等其他标准的兼容性。Flash是一种非开源的专有技术。有几种方法可以通过标签将SVG引入到HTML中。标签是所有主流浏览器都支持和使用的脚本。它被Adob??eSVGViewer推荐,但它不能用于合法的XHTML文件中,因为标签在HTML规范中不存在。pluginspage属性指向下载插件的URL。通过标签标签是标准的HTML4标签,所有较新的浏览器都支持它。它的缺点是它不允许使用脚本代码库属性指向下载插件的URL。通过SVG形状矩形circleellipselinepolylinepolygonPathSVG标签代码解析width和height属性可以定义矩形的高度和宽度。style属性用于定义CSS属性。x属性定义了矩形的左侧位置(例如,x="0"定义了矩形到浏览器窗口左侧的距离为0px)y属性定义了矩形的顶部位置(例如,y="0"定义从浏览器窗口顶部到矩形的距离为0px)。rx和ry属性使矩形具有圆角。CSS的fill属性定义了矩形的填充颜色(rgb值,颜色名称或十六进制值)CSS的stroke-width属性定义了矩形边框的宽度CSS的stroke属性定义了矩形边框的颜色rectangleCSS的fill-opacity属性定义了填充颜色的透明度(合法范围:0-1)CSS的stroke-opacity属性定义了描边颜色的透明度(合法范围:0-1)CSS的opacity属性定义了整个元素的透明度值(合法范围:0-1)的cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,则圆心设置为(0,0)r属性定义圆的半径。cx属性定义点的x坐标cy属性定义点的y坐标rx属性定义水平半径ry属性定义垂直半径x1属性定义点的起点x轴上的线y1属性定义y轴x2属性定义x轴上线的终点y2属性定义y轴上线的终点PolygonUsagepoints="220,100300,210170,250"points属性定义多边形每个角的x和y坐标多段线用于创建仅包含直线的形状points="0,00,2020,2020,4040,4040,60"points属性定义了多边形每个角的x和y坐标Path下面的命令可以用于Path数据:M=movetoL=linetoH=horizo??ntallinetoparallellineV=verticallinetoverticallineC=curvetocubicBelziercurveS=smoothcurvetoQ=quadraticBelziercurveT=smoothquadraticBelziercurvetoA=ellipticalArcCircleZ=closepath闭合路径直接看图。详细介绍了用法和功能。SVG渐变SVG渐变必须在标签中定义。在SVG中,主要有两种渐变:线性渐变径向渐变线性渐变线性渐变可以定义为水平渐变、垂直渐变或角度渐变:当y1和y2相等时,x1和当x2不同,创建水平渐变当x1和x2相等,但y1和y2不同时,创建垂直渐变当x1和x2不同,y1和y2不同时,创建角度渐变标签的id属性可以定义一个唯一的名字对于渐变fill:url(#orange_red)属性将椭圆元素链接到此渐变标记的x1、x2、y1、y2属性定义渐变的开始和结束位置颜色范围可以包含两种或多种颜色,每种颜色由标记指定。offset属性用于定义渐变的开始和结束位置。径向渐变cx、cy和r属性定义外环fx和fy定义内环渐变的颜色范围可以由两种或多种颜色组成。每种颜色都由标记指定。offset属性用于定义渐变的开始和结束位置。ok基本上所有的SVG都在这里我希望对大家有所帮助SVG资料:http://www.w3school.com.cn/sv...https://developer.mozilla.org/zh-CN/docs/Web/SVGSVG工具:http:///editor.method.ac/SVG工具使用以上内容生成的如下文件,找到你要使用的部分或整体