Javascript 保持相同字体大小的文本，而不考虑视图框的缩放

我有一个几乎完全不同于这个简单的演示

演示： …除非：

• 有一堆
  元素
• 动态调整视图框，并
• 我希望在屏幕上看到的文本的字体大小是相同的，无论viewBox有多大

---

理想情况下，我想要与

矢量效果相当的效果：非缩放笔划

（至少在Webkit上），但对于

字体大小

。这样的事情存在吗？如果不是，我最好计算viewBox大小，将其与

aspectRatio

组合以确定较大的轴，然后使用JS操作

font size

属性的CSS规则？

否，如果更改viewBox，没有任何自动方法保持文本大小不变。您必须按照自己的想法使用Javascript调整文本大小。

这里是一个基于Javascript的解决方案。您在开始时调用一次

recordSVGFontSizes（）

，并向其传递一个SVG元素和一个样式表。它，并运行样式表，查找所有提到

字体大小的规则，并记录原始字体大小

然后，当您的viewBox更改时，将记录的值传递到
normalizeSVGFontSizes（）
。它将重新计算视口并适当更新所有字体大小

请注意，由于视口计算目前不适用于Firefox，因此该脚本在Firefox中不起作用

演示：
//在启动时执行一次
var recording=recordsvgfontsize（mySVG，document.styleSheets[0]）；
//每次视口更改时都执行此操作
规范化vgfontsize（记录）；
函数记录SvgFontSizes（svgElement、样式表）{
var规则=[]；
var viewport=calculateViewport（svgElement）；
for（var i=styleSheet.cssRules.length；i--；）{
var-rule=styleSheet.cssRules[i]；
if（rule.style.fontSize）{
var parts=rule.style.fontSize.split（/（\D+/）；
push（{rule:rule，units:parts[1]，perpx:parts[0]/viewport.width}）；
}
}
返回{rules:rules，svg:svgElement}；
}
函数normalizeSVGFontSizes（fontSizeRecording）{
var viewport=calculateViewport（fontSizeRecording.svg）；
for（var i=fontSizeRecording.rules.length；i--；）{
var记录=fontSizeRecording.rules[i]；
record.rule.style.fontSize=record.perpx*viewport.width+record.units；
}
}
//给定一个元素，返回一个具有可见边界的对象
//以本地视口单位表示，例如。
//{x:-50，y:-50，宽度：100，高度：100}
函数calculateViewport（svg）{//http://phrogz.net/JS/_ReuseLicense.txt
var outer=svg.getBoundingClientRect（）；
var aspect=svg.preserveAspectRatio.baseVal，
viewBox=svg.viewBox.baseVal，
宽度=viewBox&&viewBox.width | | outer.width，
高度=viewBox&&viewBox.height | | outer.height，
x=viewBox？viewBox.x:0，
y=viewBox？viewBox.y:0；
如果（！width | |！height | |！outer.width）返回；
if（aspect.align==aspect.SVG_preserveSpectratio_NONE | | | |！viewBox | |！viewBox.height）{
返回{x:x，y:y，width:width，height:height}；
}否则{
var inRatio=viewBox.width/viewBox.height，
outRatio=外部宽度/外部高度；
var meetFlag=aspect.meetOrSlice！=aspect.SVG\u meetOrSlice\u SLICE；
var fillAxis=outRatio>inRatio？（meetFlag？'y'：'x'）：（meetFlag？'x'：'y'）；
如果（fillAxis=='x'）{
高度=宽度/伸出率；
var diff=viewBox.height-高度；
开关（aspect.align）{
case aspect.SVG_preserveSpectratio_未知：
case aspect.SVG_preserveSpectratio_XMINYMID:
case aspect.SVG_preserveSpectratio_XMIDYMID:
case aspect.SVG_preserveSpectratio_XMAXYMID:
y+=diff/2；
打破
case aspect.SVG_preserveSpectratio_XMINYMAX：
case aspect.SVG_preserveSpectratio_XMIDYMAX：
case aspect.SVG_preserveSpectratio_XMAXYMAX：
y+=diff；
打破
}
}
否则{
宽度=高度*比率；
var diff=viewBox.width-宽度；
开关（aspect.align）{
case aspect.SVG_preserveSpectratio_未知：
case aspect.SVG_preserveSpectratio_XMIDYMIN：
case aspect.SVG_preserveSpectratio_XMIDYMID:
case aspect.SVG_preserveSpectratio_XMIDYMAX：
x+=diff/2；
打破
case aspect.SVG_preserveSpectratio_XMAXYMID:
case aspect.SVG_preserveSpectratio_XMAXYMIN：
case aspect.SVG_preserveSpectratio_XMAXYMAX：
x+=diff；
打破
}
}
返回{x:x，y:y，width:width，height:height}；
}
}
上述实现修改样式表中的CSS规则，因此对于以另一种方式设置样式的文本将失败，例如使用
font size=“…”
或
style=“font size:…”
属性。一个更好的解决方案（最终即将推出）是在每个
元素的转换上附加一个自定义的
scale（）
，并使用它来调整字体大小。