SVG基础|绘制SVG矩形

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年9月1日07:17:31 评论 43 views

SVG基础|绘制SVG矩形


  一个 元素代表一个SVG矩形。通过这个元素你可以画出不同宽度,不同高度,以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

  一个SVG矩形的简单例子

  下面是一个绘制SVG矩形的简单例子。

  1. style="stroke:#006600; fill: #00cc00"/>

复制代码


  SVG矩形的位置由x和y属性决定。请记住,这个位置是相对于任何它最接近的父元素的位置。

  SVG矩形的尺寸由width和height属性决定。

  style属性允许你为矩形设置附加的样式,如描边色,描边宽度和填充色等。




  下面的图形是上面代码的返回结果:

  圆角矩形

  我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度,ry属性则决定圆角的高度。下面的例子中,三个矩形的圆角分别被设置为5像素、10像素和15像素,请注意观察他们各自圆角的大小变化。

  1. rx="5" ry="5"
  2. style="stroke:#006600; fill: #00cc00"/>
  3. rx="10" ry="10"
  4. style="stroke:#006600; fill: #00cc00"/>
  5. rx="15" ry="15"
  6. style="stroke:#006600; fill: #00cc00"/>

复制代码


  上面的代码的返回结果如下:

  上面的例子中,三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值,那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。

  下面的两个例子中,rx的值都设置为10像素,但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。

  1. rx="10" ry="5"
  2. style="stroke:#006600; fill: #00cc00"/>
  3. rx="10" ry="15"
  4. style="stroke:#006600; fill: #00cc00"/>

复制代码


  上面的代码的返回结果如下:

  描边矩形

  你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色,边框的宽度为3像素。

  1. style="stroke: #009900;
  2. stroke-width: 3;
  3. fill: none;
  4. "
  5. />

复制代码


  上面的代码的返回结果如下:

  你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子:

  1. style="stroke: #009900;
  2. stroke-width: 3;
  3. stroke-dasharray: 10 5;
  4. fill: none;
  5. "
  6. />

复制代码


  上面的代码的返回结果如下:

  填充矩形

  你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。

  1. style="stroke: #009900;
  2. fill: none;
  3. "
  4. />

复制代码


  这时,SVG矩形的填充色将和浏览器的页面颜色一样。




  你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。

  1. style="stroke: #009900;
  2. fill: #33ff33;
  3. "
  4. />

复制代码
SVG基础|绘制SVG矩形


  最后,你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中,两个句子部分叠加在一起,上面的矩形设置为50%的填充透明度。

  1. style="stroke: #009900;
  2. fill: #33ff33;
  3. "
  4. />
  5. style="stroke: #000099;
  6. fill: #3333ff;
  7. fill-opacity: 0.5;
  8. "
  9. />

复制代码


  上面的代码的返回结果如下:

 
 本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html

继续阅读
企鹅博客
  • 本文由 发表于 2020年9月1日07:17:31
  • 转载请务必保留本文链接:https://www.qieseo.com/344937.html
canvas 动态图表 H5教程

canvas 动态图表

前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都...
推荐10款常用的图片压缩上传用法,欢迎下载! H5教程

推荐10款常用的图片压缩上传用法,欢迎下载!

下面小编就为大家带来一篇深入研究HTML5实现图片压缩上传功能。小编觉得挺不错的,现在分享给大家。也给大家一个参考,一起跟随小编过来看看吧上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机...
HTML5和Webkit实现树叶飘落动画 H5教程

HTML5和Webkit实现树叶飘落动画

HTML5和Webkit在一起会实现什么样的动画呢?本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧,希望能帮组到大家。 实现如图所示的东西效果...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: