SVG 视图框中的文本字段不旋转

Question

        .pie{
            border-radius:50%;
            transform: rotate(-90deg);
        }
        .pie .background{
            fill:none;
            stroke:#eaeaea;
            stroke-width:3;
            stroke-dasharray:100.53 100.53;
        }
         .pie .chart{
            fill:none;
            stroke:#f73319;
            stroke-width:3;
            stroke-dasharray:0 100.53;
            animation: 2s linear slice ;
            animation-fill-mode:forwards;

        }
         .pie text{
            font-size:6px;
            transform: rotate(90deg);
            transform-origin: 50% 50%;
         }
        @keyframes slice{
            to{stroke-dasharray:75.39 100.53;}
        }

<body>
<svg viewBox="0 0 64 64" class="pie">
    <circle class="background" r="25%" cx="50%" cy="50%">

    </circle>
       <circle class="chart" r="25%" cx="50%" cy="50%">

    </circle>
        <text x="32" y="32">
        75%
    </text>
</svg>
</body>

JSFiddle

我的 svg 视图框中有一个 <text> 字段。视图框已旋转 -90deg，但出于显而易见的原因，我希望我的文本向后旋转。然而，似乎只有 Firefox 考虑到上述代码并旋转文本。其他浏览器不这样做的任何原因？我该如何正确书写才能使其旋转？

Answer 1

更新

OP 不喜欢在标记中放置样式，例如前面使用 presentation attribute 的示例。我同意，SVG 本来就是丑陋的，为什么要让它更丑陋？如果您使用的是真正的 SVG 文件而不是嵌入 HTML...

您可以使用这种 <?xml... 格式在外部 CSS 样式表上使用：
```
  <?xml-stylesheet type="text/css" href="style.css"?>
```

或者您可以使用 <style ...<![CDATA[... 块：

  <style type="text/css">
     <![CDATA[
       .pie .txt {
          fill: red;
          font-family: Consolas;
          font-size: 14px;
          transform: rotate(90deg);
        }
     ]]>
   </style>

如果是嵌入，正常的 <style> 块应该可以：

  <style>
    .pie .txt {
        fill: red;
        font-family: Consolas;
        font-size: 14px;
        transform: rotate(90deg);
     }
   </style>

这是一个 Plunker，它使用了最简单的选项，数字 3。

我删除了 transform-origin: 50% 50%; 因为 HTML 从中间开始，但 SVG 通常使用 (0,0) 的 X、Y 坐标开始。它可能在任何地方，但我认为它在的地方，所以我避免了它。
使用了 fill 属性.
向 <text> 元素添加了 .txt class。

旧

您可以使用表示属性：

<text x="25" y="12.5" fill="red" transform="rotate(90 20,20)" style="font-family:Consolas;font-size:10">

片段

            .pie{
            border-radius:50%;
            transform: rotate(-90deg);
        }
        .pie .background{
            fill:none;
            stroke:#eaeaea;
            stroke-width:3;
            stroke-dasharray:100.53 100.53;
        }
         .pie .chart{
            fill:none;
            stroke:#f73319;
            stroke-width:3;
            stroke-dasharray:0 100.53;
            animation: 2s linear slice ;
            animation-fill-mode:forwards;

        }
       /*  .pie .txt {
            fill:red;
            font-family: Consolas;
            font-size:14px;
            transform: rotate(90deg);
            
         }*/
        @keyframes slice{
            to{stroke-dasharray:75.39 100.53;}
        }

<body>
<svg viewBox="0 0 64 64" class="pie">
    <circle class="background" r="25%" cx="50%" cy="50%">

    </circle>
       <circle class="chart" r="25%" cx="50%" cy="50%">

    </circle>
        <text x="25" y="12.5" fill="red" transform="rotate(90 20,20)" style="font-family:Consolas;font-size:10">

          75%
    </text>
</svg>
</body>

Answer 2

无需旋转整个 SVG 然后将 <text> 旋转回来进行补偿。只需旋转 "chart" 圈即可。

.pie .background {
  fill:none;
  stroke:#eaeaea;
  stroke-width:3;
  stroke-dasharray:100.53 100.53;
}

.pie .chart {
  fill:none;
  stroke:#f73319;
  stroke-width:3;
  stroke-dasharray:0 100.53;
  animation: 2s linear slice ;
  animation-fill-mode:forwards;
}

.pie text {
  font-size:6px;
}

@keyframes slice {
  to{stroke-dasharray:75.39 100.53;}
}

<svg viewBox="0 0 64 64" class="pie">
    <circle class="background" r="25%" cx="50%" cy="50%"/>
    <circle class="chart" r="25%" cx="50%" cy="50%"
            transform="rotate(-90 32 32)"/>
    <text x="32" y="32">
        75%
    </text>
</svg>

SVG 视图框中的文本字段不旋转

Text field in SVG viewbox does not rotate

css

svg

text

css-transforms

更新

旧

片段