gpt4 book ai didi

html - 不能在 svg 的中心制作 g

转载 作者:搜寻专家 更新时间:2023-10-31 08:27:11 24 4
gpt4 key购买 nike

你好 Stackoverflow 社区。我需要帮助,我正在尝试在 svg 标签的中心制作 g 标签,但我做不到。我试过让 margin 0 auto 但还是一样。我该如何解决这个问题,这是我的带有完整代码的 jsfiddle:https://jsfiddle.net/mky4qqvd/

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
<style type="text/css">

text {
filter: url(#filter);
fill: black;
font-family: "Cinzel",serif;
font-size: 100px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

</style>
<g style="
/* width: 100%; */
width: auto;
">
<text x="0" y="100">Swinger</text>
</g>
</svg>

请帮我解决这个问题,以便我以后知道。

最佳答案

SVG 不是这样工作的。 SVG 没有像 HTML 那样的自动布局。将它想象成一个绘图程序 - 您必须告诉它在哪里绘制所有内容。

width: automargin 等 HTML 样式属性也不适用于 SVG。

SVG 确实能够在 SVG 中的特定位置水平居中文本。您也可以(某种程度上)垂直居中。

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
<style type="text/css">

text {
fill: black;
font-family: "Cinzel",serif;
font-size: 100px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-anchor: middle;
alignment-baseline: middle;
}

</style>
<g>
<text x="300" y="50">Swinger</text>
</g>
</svg>

关于html - 不能在 svg 的中心制作 g,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32284096/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com