svg 镜像路径而不改变坐标答案

【问题标题】：svg mirror paths without changing coordinatessvg 镜像路径而不改变坐标
【发布时间】：2019-01-30 18:21:28
【问题描述】：

我有一个 svg 图形，但想在不更改线条/笔划坐标的情况下对其进行镜像，但交换箭头和圆圈的位置……有没有更有效的方法来做到这一点？我想到的一件事是改变每个箭头和圆圈的角度，但做起来很乏味。另一个建议是使用transform matrix。有人知道怎么做这个吗？提前致谢。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">

<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" />
	<g fill="#4caf50" id="test">
		<polygon class="one" points="201.6,79 202.1,77.7 195.7,75.1 198.8,68.9 197.5,68.3 193.8,75.9"/>
		<path class="two" d="M461.6,138.1c0.8,1.4,2.7,1.9,4.1,1.1s1.9-2.7,1.1-4.1c-0.8-1.4-2.7-1.9-4.1-1.1 C461.3,134.8,460.8,136.6,461.6,138.1z"/>
	</g>
</g>
</svg>

【问题讨论】：

将箭头和圆圈建模为标记，然后您可以将它们放在您想要的任何形状的末端。

标签： svg matrix transform

【解决方案1】：

这可以在SVG 标记的帮助下解决。 MDN 和 W3C

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs> 
  <marker id="arrow1" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
      <marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
           markerUnits="userSpaceOnUse"
            markerWidth="10" markerHeight="10">
            <circle cx="5" cy="5" r="5" fill="#4caf50""  />
      </marker>
 </defs

<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-start: url(#circle1); marker-end: url(#arrow1); 
      fill:none; stroke:green; stroke-width:2; " />
	
</svg>

更新

可以使用属性orient = ("180") 更改标记的角度。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs> 
  <marker id="arrowLeft" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="170"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
	
	 <marker id="arrowRight" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
	 
      <marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
           markerUnits="userSpaceOnUse" orient="auto"
            markerWidth="10" markerHeight="10">
            <circle cx="5" cy="5" r="5" fill="#4caf50"  />
      </marker>
 </defs>


<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-end: url(#arrowRight); marker-start: url(#circle1); 
      fill:none; stroke:green; stroke-width:2; " />  
	  
	 <g transform="translate(0 100)" >
	<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-end: url(#circle1); marker-start: url(#arrowLeft); 
      fill:none; stroke:green; stroke-width:2; " />  
	  
	 </g> 
	  
	  
	
</svg>

【讨论】：

谢谢。我怎样才能以不同的角度多次重复使用它，尤其是箭头？
@telo78 要镜像标记，交换它们的唯一标识符 marker-start 和 marker-end 。您可以多次使用相同的标记，以便在多行上重复使用标记。
@telo78 我添加示例
@Alexander_T 适用于更简单的动画，但如果我有一百个动画箭头，则 orient 属性也需要每个箭头，对吗？除非我在路径中使用同一个箭头时可以多次旋转它？
谢谢。我审查了这篇文章并用我的例子测试了你的例子。我在某些情况下遇到了问题，如果我创建了一条较小的路径，设置为自动定向的 arrowLeft 没有沿着路径的末端或起点排列。以及我创建了一个自定义路径作为更宽路径示例和圆圈的标记。 codepen.io/tfss/pen/aXpvQj