如何在红色矩形内移动这个多边形答案

【问题标题】：How to move this polygon within red rectangle如何在红色矩形内移动这个多边形
【发布时间】：2019-10-09 15:59:09
【问题描述】：

编辑

这是小提琴 - https://jsfiddle.net/Ldvj15dk/1/

这个不工作的员工创建了这个树形图，现在我需要移动这个多边形，如下所示......但我不确定这样做的最简单方法是什么......

我应该对点进行哪些更改才能将这个多边形移动为三角形，如下图所示？

<svg width="100%" height="510">
	<g transform="translate(650,150)">
		<g transform="translate(0,100)">
			<g>
				<rect x="-150" y="-14.9" width="300" height="30" style="fill: blue"/>
				<text dx="-135" dy="0.3" text-anchor="start" style="fill: white">
					<tspan x="-10" dy="0.3em">Test Node</tspan>
				</text>
			</g><g>
				<rect x="125" y="-15" width="25" height="30" style="fill: red;"/>
				<polygon points="9.7,8.814 9.7,8.902 8.15,8.082 8.15,6.31 6.912,6.31 6.912,3.98 8.975,3.98 8.975,0 4.025,0 4.025,3.98 6.088,3.98 6.088,6.31 4.85,6.31 4.85,8.104 3.3,8.916 3.3,8.814 0,8.814 0,12 3.3,12 3.3,9.82 4.85,9.01 4.85,9.494 8.15,9.494 8.15,8.99 9.7,9.811 9.7,12 13,12 13,8.814 " style="fill: yellow;"/>
			</g>
		</g>
	</g>
</svg>

我想让它看起来像这样，

【问题讨论】：

Draggables and Resizables in SVG的可能重复
是的，有可能。
标记为离题，因为 OP 请求关于场外资源的建议。
网上有例子。
@Jayx 我正在寻求方法，问题措辞不正确

标签： html css svg

【解决方案1】：

最简单和最懒惰的解决方案就是简单地将多边形平移到所需位置。这是一个示例（使用幻数）：

<svg width="100%" height="200">
	<g transform="translate(150,50)">
		<g transform="translate(0,0)">
			<g>
				<rect x="-150" y="-14.9" width="300" height="30" style="fill: blue"/>
				<text dx="-135" dy="0.3" text-anchor="start" style="fill: white">
					<tspan x="-10" dy="0.3em">Test Node</tspan>
				</text>
			</g><g>
				<rect x="125" y="-15" width="25" height="30" style="fill: red;"/>
				<polygon transform="translate(130,-4)" points="9.7,8.814 9.7,8.902 8.15,8.082 8.15,6.31 6.912,6.31 6.912,3.98 8.975,3.98 8.975,0 4.025,0 4.025,3.98 6.088,3.98 6.088,6.31 4.85,6.31 4.85,8.104 3.3,8.916 3.3,8.814 0,8.814 0,12 3.3,12 3.3,9.82 4.85,9.01 4.85,9.494 8.15,9.494 8.15,8.99 9.7,9.811 9.7,12 13,12 13,8.814 " style="fill: yellow;"/>
			</g>
		</g>
	</g>
</svg>

【讨论】：