Question

我有一个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>

Answer 1

这可以借助System.Web.HttpUtility.HtmlDecode(Regex.Replace(htmlContent, "<(.|\n)*?>", ""))标记来解决。 MDN和W3C

SVG

更新

可以使用属性<!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")

svg镜像路径而不更改坐标

1 个答案:

更新