SVG基本形状

By kaqishe
In 杂碎
2020-08-14
网络

通过上一章的基础知识,我对SVG有了进一步的了解。所有的知识必须用于实际才能发挥出它的存在价值。

SVG能创建矩形、圆形、椭圆形、直线、曲线、多边形等一些基本的图形。

SVG <rect> 画矩形

rect元素是SVG的一个基本形状,用来创建矩形,基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。

SVG <rect>元素代表一个矩形。使用此元素,您可以绘制具有各种宽度,高度,不同笔触(轮廓)和填充颜色,尖角或圆角等的矩形。

<svg xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink">

     <rect x="10" y="10" height="100" width="100"   style="stroke:#006600; fill: #00cc00"/>

</svg>

矩形 的位置由x和y属性确定。请记住,此位置是相对于任何封闭的(父)元素位置而言的。矩形的大小由width和height 属性确定。

圆角矩形

可以在矩形上绘制圆角。属性rx和ry 确定拐角处的圆角。rx属性确定舍入的宽度,而ry属性确定舍入的高度。

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="50" width="50"  rx="5" ry="5"   style="stroke:#006600; fill: #00cc00"/> 

</svg>

矩形属性

矩形边框颜色可通过 stroke属性来设置颜色值,边框宽度stroke-width: 3来设置具体宽度。

您也可以使用style属性stroke-dasharray使矩形边框变为虚线 stroke-dasharray: 10 5;

填充色则通过fill,如果不填充颜色,可以设置 fill:none;

您还可以使用style属性fill-opacity使填充透明,如: fill-opacity: 0.5;


SVG <circle> 画圆形

<circle> SVG 元素是一个SVG的基本形状,用来创建圆,基于一个圆心和一个半径,同时可以利用stroke和fill属性对圆进行实线描边,虚线描边以及圆形的颜色填充等。

<svg xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink">

    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>

</svg>

该圆以点cx , cy为圆心,半径为r。cx,cy 和r是<circle>元素的属性。

圆形属性中其他属性基本和矩形一致,比如边线宽度、色彩、填充颜色、透明度等。可参考矩形属性。


参考地址:https://www.nhooo.com/svg/svg-ellipse-element.html

初识svg(一)
咖啡的两大原生品种-阿拉比卡和罗布斯塔的区别