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