如何在svg中统一路径并改变形状

时间:2012-03-18 08:37:46

标签: javascript svg

我绘制了两个圆弧,它们可以是一个圆圈。 我无法团结他们。   1 - 如何组合它们? 路径1 example path-1  example path-2 path1 = d="M75,250 C 100,50 250,50 275,250" path2 = d="M 275,250 C 275,450 75,450 75,250"

我想替换圆圈中的三角形。   2 - 怎么做? tringle shape:d="M-25,-12.5 L25,-12.5 L 0,-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>​

0 个答案:

没有答案