如何在SVG中对应用clipPath的图片进行水平和垂直翻转？

没问题！要给你SVG里的图片做水平或垂直翻转，用SVG原生的transform属性结合缩放变换就能轻松搞定。下面针对你的需求给出具体修改方案：

核心原理 #

SVG的scale()变换可以实现翻转效果：

• 水平翻转：使用scale(-1, 1)（X轴缩放-1，Y轴保持1）
• 垂直翻转：使用scale(1, -1)（Y轴缩放-1，X轴保持1）
• 同时水平+垂直翻转：使用scale(-1, -1)

不过直接用scale(-1)会让元素从原点（左上角）开始翻转，导致图片跑到可视区域外，所以需要配合translate()平移，把图片拉回clipPath的范围内。

具体修改代码 #

1. 水平翻转效果 #

修改你的<image>标签，添加transform属性：

<image id="SvgjsImage1004" 
       xlink:href="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" 
       clip-path="url(#clipPathId)" 
       width="600" height="250"
       transform="translate(200, 0) scale(-1, 1)"/>

这里translate(200, 0)是因为你的clipPath宽度是200px，把图片向右平移200px，抵消翻转后向左偏移的距离，保证图片在裁剪区域内显示。

2. 垂直翻转效果 #

同样修改<image>标签：

<image id="SvgjsImage1004" 
       xlink:href="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" 
       clip-path="url(#clipPathId)" 
       width="600" height="250"
       transform="translate(0, 200) scale(1, -1)"/>

translate(0, 200)对应clipPath的高度200px，把图片向下平移200px，抵消垂直翻转后向上偏移的部分。

3. 同时水平+垂直翻转 #

结合两种变换：

<image id="SvgjsImage1004" 
       xlink:href="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" 
       clip-path="url(#clipPathId)" 
       width="600" height="250"
       transform="translate(200, 200) scale(-1, -1)"/>

额外说明 #

如果你的clipPath尺寸有变化，只需要调整translate()里的数值，和clipPath的宽/高保持一致就行。这种方案不需要修改图片本身，完全通过SVG的变换属性实现，非常灵活。

内容的提问来源于stack exchange，提问作者Vasantha Kumar Boddu