如何使用单路径绘制弯曲的 SVG?
How to draw SVG curved using single path?
我要的是下图——
I have 3 relative question regarding this
1.Can我们用一个single path
.?
画出整个canvas
2.If我们只能用一条以上的路径画出整体方便给动画吗?
3.In 这两种情况谁能用示例指导正确的方法。?
这就是我到目前为止的进展...如您所见,我不是 SVG
方面的专家,当然,您可以使用圆圈表示大点。提前谢谢你。
svg {
width: 100%;
}
.straightLine {
height: 3000px;
position: relative;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: #000000;
stroke-width: 5;
stroke-miterlimit: 10;
}
<div class="straightLine">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
<g class="all">
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109 c 64.9 0 90.4 40.5 90.4 90.4"/>
</g>
</svg>
</div>
使用类似的东西:
<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />
如 the documentation 所示,路径可以包含任意数量的组件。
总结:
M/m Move current position
L/l Draw a line
H/h Draw a horizontal line
V/v Draw a vertical line
C/c Draw a cubic Bezier
Q/q Draw a quadratic Bezier
A/a Draw a circular/elliptal arc
Z/z Close path
一般情况下,大写指令指定绝对坐标,小写指令指定相对坐标。
我要的是下图——
I have 3 relative question regarding this
1.Can我们用一个single path
.?
2.If我们只能用一条以上的路径画出整体方便给动画吗?
3.In 这两种情况谁能用示例指导正确的方法。?
这就是我到目前为止的进展...如您所见,我不是 SVG
方面的专家,当然,您可以使用圆圈表示大点。提前谢谢你。
svg {
width: 100%;
}
.straightLine {
height: 3000px;
position: relative;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: #000000;
stroke-width: 5;
stroke-miterlimit: 10;
}
<div class="straightLine">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
<g class="all">
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109 c 64.9 0 90.4 40.5 90.4 90.4"/>
</g>
</svg>
</div>
使用类似的东西:
<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />
如 the documentation 所示,路径可以包含任意数量的组件。
总结:
M/m Move current position
L/l Draw a line
H/h Draw a horizontal line
V/v Draw a vertical line
C/c Draw a cubic Bezier
Q/q Draw a quadratic Bezier
A/a Draw a circular/elliptal arc
Z/z Close path
一般情况下,大写指令指定绝对坐标,小写指令指定相对坐标。