文章列表
相关文章
更多最近更新
更多SVG 创建矩形 rect
2019-05-06 23:54|来源: 网路
SVG Shapes
SVG有一些预定义的形状元素,可被开发者使用和操作:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
下面的章节会为您讲解这些元素,首先从矩形元素开始。
SVG 矩形 - <rect>
实例 1
<rect> 标签可用来创建矩形,以及矩形的变种:
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg>
运行结果
代码解析:
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
实例 2
让我们看看另一个例子,它包含一些新的属性:
Here is the SVG code:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> </svg>
运行结果
代码解析:
x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
实例 3
定义整个元素的不透明度:
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/> </svg>
运行结果
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
实例 4
最后一个例子,创建一个圆角矩形:
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg>
运行结果
rx 和 ry 属性可使矩形产生圆角。
相关问答
更多-
SVG Rect忽略高度?(SVG Rect Ignores Height?)[2022-03-18]
在SVG中,元素的x,y,宽度和高度是属性而不是CSS属性 。 只有CSS属性可以使用CSS进行样式化。 In SVG the x, y, width and height of elements are attributes rather than CSS properties. Only CSS properties can be styled using CSS. -
我不确定你是否想要保持这个规模,或者你想缩小规模,所以我有两个解决方案。 匹配双方协调的简单方法是缩小大协调。 如果你设置比例尺(1),那么大比例尺就会缩小到原来的大小,并且它们都是(15,15)。 transform = scaling的副作用是coords会相应地改变。 所以如果大矩从5缩小,然后将它的尺寸(200x200)除以10,它的坐标+笔画宽度(75,75)除以5。 另一种方式是,如果你的意图是保持200×200大的矩形大小。 你可以用transform=translate(-12.5,-12. ...
-
加载库后需要加载script.js. http://plnkr.co/edit/8qxmu5KpPZroGhB1odGK?p=preview