Javascript 在给定viewBox尺寸和文本样式的情况下，如何计算将svg文本放置在viewBox中的转换？_Javascript_Jquery_Html_Svg

Javascript 在给定viewBox尺寸和文本样式的情况下，如何计算将svg文本放置在viewBox中的转换？

javascript jquery html svg

Javascript 在给定viewBox尺寸和文本样式的情况下，如何计算将svg文本放置在viewBox中的转换？,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,我试图理解svg中的定位假设您有…，在给定（已知）字体、字体重量和字体大小的情况下，视图框的大小正确，适合文本。如果不给一个x=“…”y=“…”翻译，它将无法在视图框中“正确”定位：它将太高，并且有点向右我可以计算那些x和y转换值吗？如果翻译不依赖于字体的特征，则无需分析绘制的，如果翻译依赖于字体的特征，则无需分析绘制的下面是一个示例（也是一个jsfiddle:）。这是从草图导出的-这就是为什么我无法访问x和y平移中的计算。是红色轮廓的东西。需要注意的是，需要这些特定的x和y转换值来定位v

我试图理解svg中的定位

假设您有

…

，在给定（已知）字体、字体重量和字体大小的情况下，视图框的大小正确，适合文本。如果不给

一个

x=“…”y=“…”

翻译，它将无法在视图框中“正确”定位：它将太高，并且有点向右

我可以计算那些

和

转换值吗？如果翻译不依赖于字体的特征，则无需分析绘制的

，如果翻译依赖于字体的特征，则无需分析绘制的

下面是一个示例（也是一个jsfiddle:）。这是从草图导出的-这就是为什么我无法访问x和y平移中的计算。

是红色轮廓的东西。需要注意的是，需要这些特定的x和y转换值来定位viewBox中的文本，以便在

溢出被隐藏时，整个

都可见

文本{
填写：#000；
填充规则：偶数奇数；
字号：700；
字体系列：Helvetica Bold，Helvetica；
字号：36px
}
/*只是为了演示的目的*/
html{
填充：20px；
背景：#ccc
}
svg{
轮廓：1px纯红；
背景：#fff；
溢出：隐藏/*以防您想处理翻译*/
}

已翻译
我的示例文本
未翻译
我的示例文本

您的问题令人困惑，因为我们希望您（比互联网上随机出现的陌生人）更了解答案

我真正的问题是x=“-2”和y=“25”来自哪里

这就像问为什么一本书是蓝色的，或者为什么它在书架的左端。它就在那里，因为这是您或设计SVG的人将它放在那里的地方

如果您还不清楚，SVG不是HTML。事物不会像HTML中那样自动定位。您必须指定SVG文档中元素的位置和大小

如果你想知道为什么文本会被放置在它所在的位置，去问问设计师

我猜

…是指如果您将给定文本的大小设置为36px，将其字体设置为“Proxima Nova”，并将其放置在页面的左上角，则：

其右下角将位于（241,33）

文本基线起始位置将位于（-2,25）

从而解释生成的文本x、y坐标和viewBox值

但是我没有那种字体，所以我不能确定

更新

如果需要在浏览器中重新定位文本，可以在某些初始位置和字体大小添加文本。然后对文本元素调用getBBox（）。这将为您提供相对于初始文本位置的文本边界。基于此，您可以计算最终位置和大小。您还可以修改viewBox，以便在需要时正确缩放文本

//查找文本元素
var mytext=document.getElementById（“mytext”）；
//得到它的边界框
var bbox=mytext.getBBox（）；
//使用文本边界框中的值重新定位文本
setAttribute（“x”，-bbox.x）；
mytext.setAttribute（“y”，-bbox.y）；
//文本的左上角现在应该位于SVG的左上角（0,0）
//现在更新SVG视图框，使其适合文本
document.getElementById（“mysvg”）.setAttribute（“viewBox”、“0 0”+bbox.width+”“+bbox.height”）；
//请注意，文本的bbox与文本不紧密匹配。它包括em框

文本{
填写：#000；
填充规则：偶数奇数；
字号：700；
字体系列：Helvetica Bold，Helvetica；
字号：36px
}
/*只是为了演示的目的*/
html{
填充：20px；
背景：#ccc
}
svg{
轮廓：1px纯红；
背景：#fff；
溢出：隐藏/*以防您想处理翻译*/
}


我的示例文本