Question

＆＃13;

        .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;}
        }

＆＃13;

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

＆＃13;

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属性。
将.txt课程添加到<text>元素。

OLD

您可以使用演示文稿属性：

<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>进行补偿。只需旋转“图表”圈。

.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视图框中的文本字段不会轮换

2 个答案:

更新

OLD

段