如何在Firefox上的svg元素中居中设置文本？
在我的svg元素中，我有一个文本元素:
<text alignment-baseline="middle" text-anchor="middle">
这在Chrome上使元素垂直居中，但在Firefox上失败:https://jsfiddle.net/g398ajc0/1/
如何让它处处发挥作用？
（还有，如果字体对齐不好，有没有办法移动几个像素？边距或顶部/底部似乎都不起作用）
共有1个答案
因此，根据Mozilla文档，标记中不支持“alignation-baseline”和“text-anchor”，因此您必须使用x和y位置。 （链接）
所以我发现看起来最好的是:
<svg viewBox="-20,-20,40,40" class="progress-ring">
<circle r="20" class="progress-ring-circle"></circle>
<path d="M0,-20 A20,20,0,0,1,6.180339887498949,-19.02113032590307"
class="progress-ring-ring" style="stroke: rgb(255, 0, 0);"></path>
<text dx="-4" dy="5"> 1 </text>
</svg>
不过，你可能还可以多花点时间来让它完全按你想要的方式集中。
-
我想为一个笔记应用程序添加笔记加号。我做了一个固定位置的圆，这样它总是可见的。然后，我想做两条线，形成一个加号，并将这些线居中。这是代码： null null 请告诉我如何将加号居中到固定位置的圆上。谢谢！
-
问题内容： 我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin- right设置为auto。不起作用，它的作用就像是左边距为0（默认值）。 有人知道我的错误吗？ 问题答案： SVG默认为内联。添加到它，然后将按预期工作。
-
我知道这个问题已经问过，但我看到的解决方案对我不起作用。我有下面的代码，但正如你所看到的，文本不在圆圈的中间 null null
-
问题内容： 我在将属性设置为的元素居中时遇到问题。有谁知道为什么图像没有居中？ 问题答案： 如果设置了宽度，则可以使用：
-
自从转到Bootstrap 3以来，我一直在努力使一些图像居中。以前，我会在整个coll元素上使用以分页为中心的类，但现在不起作用了。 此外，我尝试创建类img中心来使用margin:0 auto（根据此处的答案），但这也不起作用，我不确定为什么。如果有人能给我指出正确的方向，那就太好了。
-
我在这里遇到了一个大麻烦。svg元素的textPath标记中有一些文本需要翻转180度。我已经使用了所有可以与css一起工作的方法，但绝对没有一种方法起作用。有人能帮我翻转元素中的文本吗。 null null
-
如何在Elm中设置Html元素的焦点？我试图在元素上设置自动聚焦属性，它只在页面加载上设置焦点。
-
问题内容： 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它，则水平居中，但不能垂直居中。添加后，它甚至没有水平居中。 这是完整的设置： 如何使用CSS在屏幕上将此框居中？ 问题答案： 基本上，您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半，以将中心移到div的中间。 因此，在提供（标准模式）的情况下，此操作应： 或者，如果你不关心垂直