×

如何在SVG中创建复杂路径

作者:Web前端之家2020.12.29来源:Web前端之家浏览:1086评论:0
关键词:svg
微信公众号

微信公众号

600.png

SVGpath元素要先进得多。可以说这是您需要的唯一元素,因为它可以绘制您想要的任何形状。但是,有一个缺点,最好用一个例子来说明:

<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />

它看起来很复杂,可能很难遵循。

path元素需要单个d属性,该属性的字符串值包含已编码绘图指令的列表。它不像正则表达式那么复杂,但是很容易在数字丛林中迷失方向。

使用由大写或小写字母标识的一系列命令来形成绘图字符串。字母后跟零个或多个适用于该特定命令的参数。例如,以下路径使用M命令将SVG笔移动到起点500,500,而无需画线:

<path d="M500,500" />

SVGviewBox属性会影响笔在图像本身中的位置。使用500,500上面的示例,笔将为:

  • SVG使用时,水平和垂直居中 viewBox="0 0 1000 1000"

  • 位于以下位置时位于左上方 viewBox="500 500 1000 1000"

  • 位于右下角时 viewBox="-500 -500 1000 1000"

  • 在可见区域之外时viewBox="0 0 400 400"

同样,小写字母m相对于其当前位置移动笔-例如,50100单位和上单位:

<path d="m50,-100" />

画线相似:L画一条线到绝对坐标,l(小写L)画一条相对于当前位置的线。因此,以下路径相同:

<path d="M500,500 L100,600" /><path d="M500,500 l-400,100" />

H并相应地h将水平线绘制到绝对或相对x位置。例如:

<path d="M500,500 H800" /><path d="M500,500 h300" />

奖励积分,如果你能猜到是什么Vv做...

<path d="M500,500 V400" /><path d="M500,500 v-100" />

最后,Zz通过从当前点到起点画一条线来关闭路径。通常,Z这将是字符串中的最后一个命令,尽管可以创建具有多个子路径的字符串。例如:

<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />

结果如下图所示。

q2.jpg

SVG路径可以用CSS样式也可以添加strokestroke-widthfill根据需要和其他属性。

这是简单的方法。现在,它变得令人麻木了。考虑A/a命令,该命令使用以下参数绘制椭圆的弧(截面):

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

在此示例中:

  • rx 是椭圆x半径

  • ry 是椭圆y半径

  • x-axis-rotation 是椭圆旋转的度数

  • large-arc-flag0对最小的弧形或1为最大

  • sweep-flag0对于正角或1负(高于或低于线)

  • x y 是圆弧的终点

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg20201229ad2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria