在Safari中，SVG文本元素上的CSS变换不起作用。

Question

尝试在父级SVG中定位电池指示器。SVG元素<svg viewBox="0 0 24 24">包含电池路径和显示百分比的文本元素。它使用一些CSS变换和文本属性进行定位。在Chrome/Firefox中打开时，文本位置正确，但在Safari中偏移。

<text 
    text-anchor="middle"
    dominant-baseline="middle"
    style="transform:translate(50%,98%) scale(.2);
    font:700 13px sans-serif;fill:#deba78"
    >24.2%</text>

Codepen https://codepen.io/niwsa/pen/rNNBKEg?editors=1000

这是一个Codepen链接，可以在网页中编辑HTML、CSS和JavaScript代码的在线编辑器。您可以使用它来创建漂亮的Web应用程序，甚至可以与别人分享您的代码。

- ninjaas

---

更新：当提供百分比值时，Safari忽略<text>元素上的翻译问题。 - ninjaas

可能与此错误有关：https://bugs.webkit.org/show_bug.cgi?id=183237 - Duvrai

Answer 1

将<text>元素包裹在一个<g>元素中，并对该元素应用CSS变换，目前即使在Safari中也可以使用。这样做仍然是CSS，因此CSS过渡、动画、自定义属性、基于选择器的样式和连续字体缩放等都能够使用。

- Robert Monfera

---

用<g>标签包装是我最简单的解决方法。谢谢！遗憾的是，在Safari中仍未修复... - Michael Chen

很棒的解决方法，也解决了我的问题！在Safari中仍未修复。。。 - Matthäus Schwarzkogler

非常感谢！已解决我的Safari浏览器问题。 - Kevin H Griffith

Answer 2

与其翻译文本，不如为文本添加属性，例如x和y。与其缩放文本，不如改变字体大小。

对于路径，可以选择像这样的SVG转换：

body {
  width: 200px;
}
.bg {
  fill: #beeb1b;
}
.cap {
  fill: #aaa8a9;
}
.trunk {
  fill: #231f20;
}

<svg xmlns="http://www.w3.org/2000/svg" tabindex="0" viewBox="0 0 351.33 722" aria-labelledby="bottletitle bottledesc" role="img">
    <title id="bottletitle">
        Bottle
    </title>
    <desc id="bottledesc">
        Bottle with battery indicator inside
    </desc>
    <g data-name="Layer 4" class="bg">
        <rect width="351.33" height="722" rx="23.33" ry="23.33"/>
    </g>
    <g data-name="Layer 3" class="cap">
        <rect x="146.81" y="60.9" width="57.71" height="73.67"/>
    </g>
    <g data-name="Layer 2" class="trunk">
        <path d="M173,153.25h57.75V223s1.08,25.33,30.41,56c27.06,28.29,35.34,60.33,35,71.33-.21,7,0,324.67,0,324.67s-3.33,7.33-9.33,7.33H117.12s-9-.33-9-6.66v-325s-.33-33,30.34-67c0,0,34.33-32.67,34.33-60.67S173.33,153.63,173,153.25Z" transform="translate(-26.46 -18.67)"/>
    </g>
    <svg viewBox="0 0 24 24">
        <defs>
            <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
                <stop offset="0%" stop-opacity="1" stop-color="#2ecc71"/>
                <stop offset="24.2%" stop-opacity="1" stop-color="#2ecc71"/>
                <stop offset="24.2%" stop-opacity="0" stop-color="#2ecc71"/>
                <stop offset="100%" stop-opacity="0" stop-color="#2ecc71"/>
                <animate attributeName="y2" from="1" to="0" dur="500ms" repeatCount="2s" fill="freeze"/>
            </linearGradient>
        </defs>
        <path fill="url(#lg)" d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" stroke="#fff" transform="scale(.5,.5) rotate(90,12 12) translate(45,-12)"/>
        <text text-anchor="middle" dominant-baseline="middle" style="font:700 2.5px sans-serif;fill:#deba78" x="12" y="23">
            24.2%
        </text>
    </svg>
</svg>

- enxaneta

---

看起来不错。它甚至可以处理长文本。感谢您的快速修复。但原始的CSS变换不起作用，可能是浏览器的错误吗？ - ninjaas

@ninjaas 是这样，为什么不报告给Safari开发人员以便修复呢？ - Robert Longson

@enxaneta 一个很好的例子，展示如何找到有用的解决方案。 - Alexandr_TT

@RobertLongson 提交了一个 bug 报告 https://bugs.webkit.org/show_bug.cgi?id=202588 - ninjaas

哇，即使在Safari技术预览版中，这个案例仍然失败了，而且错误报告仍处于“新建”状态。x/y/fontSize的解决方法只是一个权宜之计，它跨越了CSS变换和变量到属性，这通常是不可取的（您希望使用CSS自定义属性、CSS过渡/动画等）。 - Robert Monfera

这是一种糟糕的修复方式。 - Viktor Hardubej