旋转svg填充路径框

Question

我使用svg设计框边框，如下所示：

HTML：

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

CSS：

.decor {
  fill: #F00;
  stroke: #e74c3c;
}

结果：

现在我需要旋转到这个：

如何产生这个？

演示场

Answer 1

只要这样做：

.decor {
  fill: #F00;
  stroke: #e74c3c;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

这将使其旋转为您想要的方式。

小提琴： http : //jsfiddle.net/jkvp1x8m/

Answer 2

将transform =“ rotate（180，50，50）”添加到路径

 .decor { fill: #F00; stroke: #e74c3c; } 

 <svg class="decor" height="100%" viewBox="0 0 100 100" width="100%" preserveAspectRatio="none" > <path transform="rotate(180, 50, 50)" d="M0 0 L100 100 L0 100"></path> </svg>