在SVG中翻转PNG

Question

我想翻转嵌入在我的嵌入式SVG中的png文件，因为其中包含的元素导致该文件上下颠倒。我尝试用诸如transform：rotate（180deg）;之类的方法编辑包含它的id =“ path104”元素。但这会使其脱离屏幕。

代码：

https://codepen.io/anon/pen/ZqBVjq

PNG本身作为模式嵌入在id =“ defs453”中。

<defs id="defs453">

    <pattern id="pattern-image-browser-filling" x="0" y="0" width="1" height="1">

      <image xlink:href="https://image.ibb.co/gtoOip/sdfgh.png" width="893.5" height="446.8"></image>

    </pattern>

  </defs>

Answer 1

您需要变换图像：scale（1，-1）用于垂直翻转。然后翻译回translate（0，-446.8）

<image transform="scale(1,-1) translate(0,-446.8)" xlink:href="image.ibb.co/gtoOip/sdfgh.png"; width="893.5" height="446.8"></image>