使用 CSS 旋转 SVG 路径

Answer 1

只需使用元素类型选择器并向其添加

transform: rotate(180deg)

属性，如下面的代码片段所示。

* {
  background: #e1e1e1;
}
svg {
  transform: rotate(180deg);
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

---

或者，如果您只想旋转

path

而不是

svg

本身，请包含

transform-origin

，如下面的代码片段所示：

* {
  background: #e1e1e1;
}
path {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

Answer 2

内联你会这样做：

• x 轴翻转：transform="scale(-1 1)"
• y 轴翻转：transform="scale(1 -1)"

例如。在你的例子中：

<svg class="decor" transform="scale(-1 1)" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

Answer 3

您还可以直接通过 SVG 本身的 transform 旋转 SVG 的路径。

<svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90 50 50)" viewBox="0 0 100 100" width="100" height="100">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

Answer 4

您还可以使用 style 属性旋转 180 度，如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1024 1024" data-node-id="a0cef7b2-6c8c-458d-8b52-0c8b80c65008"
     data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700"
     data-type="icon" style="transform: rotate(180deg)">
    <path d="M342 214l468 298-468 298v-596z" data-node-id="a3145c10-0a28-4d2c-8b7b-8331bc1905c7" data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700" data-type="path" class=""></path>
</svg>

这将显示一个指向左侧的三角形。

Answer 5

* {
  background: #e1e1e1;
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>