Javascript 如何在svg中统一路径和改变形状
我画了两条弧,它们在一起可以是一个圆。 我不能把他们团结起来。 1-如何组合它们? 路径1 路径1=Javascript 如何在svg中统一路径和改变形状,javascript,svg,Javascript,Svg,我画了两条弧,它们在一起可以是一个圆。 我不能把他们团结起来。 1-如何组合它们? 路径1 路径1=d=“M75250 C 100,50 250,50 275250” 路径2=d=“M 275250 C 275450 75450 75250” 我想把三角形换成一个圆。 2-怎么做? 三角形状:d=“M-25,-12.5 L25,-12.5 L0,-87.5 z”位于路径内。 谢谢 我的代码: <svg xmlns="http://www.w3.org/2000/svg" version="
d=“M75250 C 100,50 250,50 275250”
路径2=d=“M 275250 C 275450 75450 75250”
我想把三角形换成一个圆。
2-怎么做?
三角形状:d=“M-25,-12.5 L25,-12.5 L0,-87.5 z”
位于路径内。
谢谢
我的代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line class="line_svg" x1="75" y1="100" x2="275" y2="100" />
<line class="line_svg" x1="75" y1="250" x2="275" y2="250" />
<line class="line_svg" x1="75" y1="100" x2="75" y2="400" />
<line class="line_svg" x1="175" y1="100" x2="175" y2="400" />
<line class="line_svg" x1="275" y1="100" x2="275" y2="400" />
<line class="line_svg" x1="75" y1="400" x2="275" y2="400" />
<path id="path1"
d="M 275,250 C 275,450 75,450 75,250" fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="75" cy="250" r="18" fill="blue" />
<circle cx="175" cy="100" r="18" fill="blue" />
<circle cx="275" cy="250" r="18" fill="blue" />
<circle cx="175" cy="400" r="18" fill="blue" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<animateTransform
attributeName="transform"
begin="0s"
dur="10s"
type="rotate"
from="0 -100 -110"
to="360 150 150"
repeatCount="1" />
<animateMotion dur="11s" repeatCount="1" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
<circle id="pointA" cx="75" cy="250" r="5" />
</svg>
为什么不同时使用圆圈?我相信使用将帮助您简化一些事情。另一件事,您的三角形路径未正确闭合,即没有
结束标记。您正确的路径未闭合,谢谢我不使用圆,因为我想在将形状更改为: