使用 CSS 旋转 SVG 路径

Question

我有这个SVG：

* {
  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>

如何将其旋转 180 度？！

演示

- NewCod3r

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>

- Harry

---

好的，我会尽力进行翻译。关于IE 6-8的支持，请查看以下链接：https://caniuse.com/#search=transform-origin - Aleksandar

购物者自负：如果要添加转换或动画，您必须记住旋转元素并且“向下”可能就是“向上”，因此请谨慎。 - Sgnl

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>

- AndiAna

---

添加 transform="scale(-1 -1)" 对我有用，而不是 transform="scale(-1 1)"。 我认为你的示例中有一个打字错误。 - nymphadora

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>

- gieoon

---

错误： <svg> 属性 transform: Trailing garbage, "rotate(180, originX, originY…". - AndiAna

图片尚未显示 - jokermt235

transform="rotate(90 0 0)" 正常工作。 - Buda Sergiu Flavius

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>

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

- gil.fernandes