css SVG转换-水平翻转

wpx232ag 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(226)

我需要翻转这个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>

感谢任何帮助，干杯！

css

来源：https://stackoverflow.com/questions/43592987/svg-transformation-flip-horizontally

3条答案

按热度按时间

wvt8vs2t1#

你可以设置一个变换来翻转物体，然后移动形状（当它围绕原点翻转时）。

<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>

赞(0）回复(0）举报 2023-05-08

wz8daaqr2#

如果你可以使用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>

赞(0）回复(0）举报 2023-05-08

sulc1iza3#

另一种更简单的方法是在任何想要翻转元素的地方使用transform: rotate(180deg)。

赞(0）回复(0）举报 2023-05-08