Question

我有以下svg图像，我想要水平翻转图像。我怎样才能做到这一点？已经尝试将scale（-1,1）添加到某些转换语句中，但它似乎不起作用。

注意：svg是从草图导出的，因此格式化可能有点奇怪。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Bitmap">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <image mask="url(#mask-2)" x="-800" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg">
            </image>
        </g>
    </g>
</svg>

注意：我只想翻转图像，不想翻转面具。

Answer 1

Aaah ......我找到了解决方案。我需要包装图像并将掩码添加到容器中。然后转换图像。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Bitmap">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <g mask="url(#mask-2)">
                <image x="-800" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg" transform="scale(-1 1)">
                </image>
            </g>
        </g>
    </g>
</svg>

Answer 2

缩放使用坐标系的原点。如果你想在图像的中心缩放它，你必须将Imgage的中间转换为原点，然后缩放，然后转换回来：

添加属性：

transform="translate(tx,0) scale(-1,1) translate(-tx,0)"

使用tx = PositionOfImageX + WidthOfImgage / 2

注意：从右到左转换过程，因此它以translate（-tx，0）

开头

如何水平翻转svg内的图像？

2 个答案: