Html SVG 转换 - 水平翻转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43592987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG Transformation - Flip Horizontally
提问by Alex
I need to flip this SVG horizontally - can't find anything online. Here it is:
我需要水平翻转这个 SVG - 在网上找不到任何东西。这里是：
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
Any help appreciated, cheers!
任何帮助表示赞赏，干杯！
回答by Robert Longson
You can just set a transform to flip things and then move the shape (as it's flipped about the origin).
您可以设置一个变换来翻转事物，然后移动形状（因为它围绕原点翻转）。
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>回答by Chris K.
If you can use CSS (this does not work when imported into Inkscape as of today), you can also use a CSS scale transform, which has the advanage that it is based on the element's center by default: transform: scale(-1,1);
如果您可以使用 CSS（这在今天导入 Inkscape 时不起作用），您还可以使用 CSS 缩放变换，它的优点是默认基于元素的中心： transform: scale(-1,1);
<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>