尝试在 <svg> 中垂直翻转 <g>
Trying to flip vertically a <g> inside a <svg>
我正在尝试垂直翻转 <g> 但它不起作用。实际上，我试图翻转的三角形显示出来了..
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<g style="transform: scaleY(-1);"> <!-- THIS FLIPPING DOESN'T WORK-->
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
<g>
<polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
</svg>
</body>
</html>
试试这个
<!DOCTYPE html>
<html>
<body>
<svg height="240" width="500">
<g transform="scale(1, -1) translate(0, -250)">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
<g>
<polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
</svg>
</body>
</html>
我正在尝试垂直翻转 <g> 但它不起作用。实际上，我试图翻转的三角形显示出来了..
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<g style="transform: scaleY(-1);"> <!-- THIS FLIPPING DOESN'T WORK-->
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
<g>
<polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
</svg>
</body>
</html>
试试这个
<!DOCTYPE html>
<html>
<body>
<svg height="240" width="500">
<g transform="scale(1, -1) translate(0, -250)">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
<g>
<polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
</g>
</svg>
</body>
</html>