相关文章
更多最近更新
更多SVG 绘制路径path
2019-05-06 23:59|来源: 网路
SVG 路径 - <path>
<path> 元素用于定义一个路径。
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
实例 1
上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
运行结果
实例 2
使用贝兹曲线流畅的曲线模型,可无限期的缩放。一般情况下,用户选择两个端点和一个或两个控制点。一个一个控制点的贝塞尔曲线被称为二次贝塞尔曲线和两个控制点的那种被称为立方体。
下面的例子创建了一个二次贝塞尔曲线,A和C分别是起点和终点,B是控制点:
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg>
运行结果
复杂吗?是的!!由于在绘制路径时的复杂性,强烈建议使用SVG编辑器来创建复杂的图形。
相关问答
更多-
将svg加载为路径(Load svg as path)[2022-02-05]
好的,我找到了解决方案: { test: /\.svg$/, loader: 'file?name=/resources/[path][name].[ext]' }, { test: /\.png$/, loader: 'file?name=/resources/[path][name].[ext]' } 这种方式加载器保留名称和路径,并预先添加/resources/文件夹。 Ok, I found solut ... -
SVG使用onclick绘制路径(SVG draw path with onclick)[2022-05-01]
clientX和clientY坐标是浏览器窗口坐标。 您需要将它们转换为svg坐标。 getScreenCTM()函数返回一个转换矩阵,将svg坐标转换为窗口坐标。 使用此矩阵的逆矩阵将窗口坐标转换为svg坐标。 在单击功能的示例中,您可以替换... xArry.push(evt.clientX); yArry.push(evt.clientY); 与... var svg = document.getElementById("svgid"); var point = svg.createSVGPoint ... -
您可以通过调用document.getElementById来获取路径元素,并从那里获取/设置属性... var d = document.getElementById("
").getAttribute("d"); document.getElementById(" ").setAttribute("fill", "red"); You can get the path element by calling document.getElementById and fr ... -
与XAML的弧相同。 只要关闭99.99%的弧线,你有一个圆圈! Same for XAML's arc. Just close the 99.99% arc with a Z and you've got a circle!
-
反转SVG路径(Reversing an SVG Path)[2021-06-09]
使用Inkscape : 在Inkscape中打开此svg文件。 选择路径 单击菜单 - >路径 - >反向 保存文件或在Inkscape中打开xml编辑器以查找新的路径数据。 或者使用javascript。 获取并反转每个路径段。 Use Inkscape: Open this svg file in Inkscape. select the path click Menu -> Path -> Reverse save the file or open the xml editor in Inkscap ... -
如果它是从最后一个绘制点到鼠标点的直线,那么使用基本数学= SQRT((x1-x2)^ 2 +(y1-y2)^ 2) 唯一的技巧是从屏幕坐标转换为用户坐标。 这是我使用的功能非常好(到目前为止)... function getMousePos(evt) { var svgPoint = document.documentElement.createSVGPoint(); evt = evt || window.event; if (typeof evt.pageX != 'un ...
-
使用类似的东西:
如文档中所示,路径可以包含任意数量的组件。 作为总结: M/m Move current position L/l Draw a line H/h Draw a ho ... -
如何一次滚动绘制每个SVG路径(按时间顺序)?(How to scroll draw each SVG path one at a time (chronologically)?)[2021-08-19]
这怎么样? 您可以通过在scrollBehaviour数组中设置startPct和endPct百分比值来控制每个路径的开始时间并完成绘制。 注意:此代码假定您仅使用路径和rects。 如果您开始使用其他元素,则必须更新calcPathLength()函数。 var scrollBehaviour = [ {id: 'line1', startPct: 0, endPct: 30}, {id: 'rect1', startPct: 30, endPct: 60}, {id: ... -
绘制SVG路径的最简单方法(Simplest way to draw an SVG path)[2022-03-05]
CSS-Tricks最近写了一篇关于此的文章 : 我们的想法是用虚线笔划设置我们的SVG形状,其中短划线长度是整个路径的长度。 然后,我们使用动画将该路径长度偏移每个破折号。 ( 阅读文章 ) 小提琴 .svg1 { stroke-dasharray: 822; stroke-dashoffset: 822; animation: dash 5s linear alternate infinite; } @keyframes dash { from { stroke-d ... -
是否可以使用带路径绘制的内联svg来屏蔽图像?(Is it possible to mask an image with an inline svg drawn with a path?)[2023-05-08]
如果你将图像放在svg中,你可以让它在任何地方都可以工作,如下所示: