如何水平翻转svg中的图像？
如何水平翻转svg中的图像？
提问于 2017-07-04 08:50:32
我有下面的svg图像，我想水平翻转图像。我怎么能这么做？已经尝试在一些transform语句中添加刻度(-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>注意:我只想翻转图像，而不想翻盖面具。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-04 09:13:28
啊啊..。我找到了解决办法。我需要包装图像并将掩码添加到容器中。然后变换图像。
<?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>Stack Overflow用户
发布于 2018-04-04 09:41:53
比例尺使用坐标系的起源。如果您想在图像的中心缩放它，您必须将图像的中间部分转换为原点，然后缩放，然后再翻译回来：
添加属性：
transform="translate(tx,0) scale(-1,1) translate(-tx,0)"与tx = PositionOfImageX + WidthOfImgage /2
注意:从右到左的转换过程，所以它以翻译开始(-tx，0)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44901306
复制相关文章
相似问题
腾讯云开发者
