SVG:缩放SVG文档时如何缩放字体大小？

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以在不失真的情况下缩放到任意大小。当缩放SVG文档时，可以通过以下几种方式来缩放字体大小：

使用百分比：可以通过设置字体大小的CSS属性为百分比值来实现字体大小的缩放。例如，设置字体大小为"50%"表示将字体大小缩小到原来的一半。
使用em单位：em单位是相对于父元素字体大小的倍数。通过设置字体大小的CSS属性为em单位值，可以根据父元素的字体大小来缩放字体。例如，设置字体大小为"0.5em"表示将字体大小缩小到原来的一半。
使用viewport单位：viewport单位是相对于视口大小的单位。可以通过设置字体大小的CSS属性为vw或vh单位值来根据视口大小来缩放字体。例如，设置字体大小为"5vw"表示将字体大小设置为视口宽度的5%。
使用JavaScript：可以使用JavaScript来动态计算并设置字体大小。通过监听SVG文档的缩放事件，可以根据缩放比例来计算新的字体大小并设置给相应的元素。

需要注意的是，缩放字体大小可能会导致字体在不同大小的设备上显示效果不一致，因此需要根据具体的应用场景和需求来选择合适的缩放方式。

腾讯云相关产品和产品介绍链接地址：

腾讯云SVG文档处理服务：https://cloud.tencent.com/product/svs

页面内容是否对你有帮助？

有帮助

没帮助

SVG:缩放SVG文档时如何缩放字体大小？

javascript、html、css、svg、fonts

像this、this、this、this和this这些关于SVG缩放的问题也没有帮助。缩放SVG文档时，缩放字体大小的最佳方法是什么？假设原始SVG文档大小为500x1000。为了适合我们的设计视窗，我们将文档缩放到250x500，并允许用户进行一些编辑，如重新定位和更改文本。编辑完成后，我们将缩小到500x1000，然后再导出为PNG图像。目前，我们手动重新计算每个比例的<e

浏览 56提问于2019-01-02得票数 0

1回答

如何覆盖Firefox中影响svg文本的“最小字体大小”？

css、firefox、svg、accessibility

当火狐的“最小字体大小”设置为15时，svg中的文本会变得非常大。注意:它是一个img，其中的src是一个.svg文件。预期：svg中的文本显示为正常。实际结果：svg中的文本被放大。如何设置最小字体大小: Firefox >首选项>语言和外观>字体和颜色>高级>设置最小字体大小为15

浏览 2提问于2019-05-01得票数 4

1回答

高质素的html数字

html、svg、tikz

我正在使用一些生成html的工具编写文档。我想在我的网页中嵌入一些高质量的数字，这些数字对应于：还有其他方法嵌入这些数字吗？

浏览 4提问于2013-10-09得票数 1

回答已采纳

1回答

缩放图表上的“限制”文本缩放

d3.js、tooltip

问题如下:我们在图表上有一些工具提示，在缩放图表时，它们会相应地平移，即保持它们与图表元素相关的位置，但工具提示及其文本的大小不应缩放。现在一切缩放，无论是工具提示和文本，它通常是正确的，但不知何故，我们必须重新设置缩放的文本，以保持它的可读性或找到计算正确位置的方法。谢谢。

浏览 3提问于2013-11-26得票数 0

1回答

规模SVG但没有其他？

javascript、html、css、svg、d3.js

我仍然在玩D3和绘制SVG元素，我决定尝试制作一个可以根据轨道板(两指触摸展开)进行缩放的图形，或者是一个shift +滚动轮移动，但是其他的东西都保持原样。我注意到，当我尝试这些动作时，整个页面都在缩放。不幸的是，我不知道该怎么做。 $('#target').html('<svg height="200" width="200"><rect width="100" height="10

浏览 1提问于2015-03-04得票数 0

1回答

如何在textPath中使用转换后的路径？

svg

DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svgwidth="2000" height="2000" viewBox="-1

浏览 20提问于2021-05-16得票数 0

1回答

模糊字体，在画布中动态生成SVG中的线条

jquery、html、css、canvas、svg

我有一个代码，可以生成一个从HTML表的SVG图像。我想在SVG中看到我的HTML table 1:1。这里的问题是什么？

浏览 0提问于2012-12-17得票数 0

1回答

Problem：我们需要复制RaphaelJS中创建的SVG文本，在RaphaelJS中使用可变字体、字体大小、位置、缩放、旋转。但是.包围框的高度是基于字体大小和字体系列的，但与实际字符串无关。因此，“Y”和“，”(字体和字体大小相同)的字符串具有相同的高度。当我们在SVG中重新创建文本时(通过在PHP中生成文本)，我们可以得到字体大小的正确，以及字体家族的正确。然而，SVG的高度并不独立于实际的字符串。所以“，”会比“Y”低得多

浏览 3提问于2012-02-09得票数 6

1回答

如何在响应的SVG中保持文本大小？

javascript、d3.js、svg

我已经在svg元素上设置了viewBox和preserveAspectRatio属性以获得响应性，但是这扩展了包括文本在内的所有svg元素。我尝试将字体大小设置为属性和CSS，但是文本元素继续与图表的其余部分一起缩放。height", '100%').attr('preserveAspectRatio','xMinYMin')

浏览 1提问于2019-04-02得票数 3

2回答

SVG不能用CSS进行缩放

css、svg、scaling

我在缩放SVG文档时遇到了问题。它包含在HTML文档中： <path class="path_class" ...z"/>我尝试使用CSS进行缩放，如下所示

浏览 4提问于2014-01-24得票数 0

回答已采纳

1回答

如何对raphael.svg进行缩放

javascript、jquery、raphael

我有这个我读过拉斐尔如何scale画布的文档，但没能成功。有人知道如何缩放raphael.svg吗？

浏览 0提问于2013-11-16得票数 0

回答已采纳

1回答

SVG中的文本元素尽管有固定的值，但其位置却是完美的。

javascript、jquery、html、css、svg

所以当我有下面的css时： max-width: 400px;尽管有175和35的常量值，50%的位置仍然在相同的位置，如果我像这样更改CSS： max-width

浏览 2提问于2016-03-23得票数 0

1回答

显示保持原始字体大小的SVG

css、svg

我有几个svg的包括在我的主页和图像标签。对于每个svg，显示的字体大小应该相同。我如何才能做到这一点？

浏览 0提问于2014-11-15得票数 0

3回答

SVG文本比例-宽度和高度

text、svg、scale

我想在svg中缩放一个文本。如果我使用字体大小，宽度和高度都会被缩放。有没有办法只缩放宽度或高度？-我找到的所有使用scale标签的例子都不起作用，或者对文本不起作用。谢谢你的帮助，亨德里克

浏览 1提问于2011-11-05得票数 7

回答已采纳

5回答

SVG:固定字体大小

html、css、svg

我有一个与html代码内联的SVG。它的缩放，以适应宽度与保持高宽比。是否有一种方法可以将字体大小固定到可以通过媒体查询控制的视口？编辑：问题是，当我在宽度范围内设置固定的字体大小时，字体会相对于svg大小进行调整。 font-size: 14px; #svg-containersvg text

浏览 4提问于2017-04-25得票数 10

回答已采纳

1回答

特例、网页字体或位图

html、canvas、fonts、font-face、cufon

我试着用cufon 来转换这个字体，但是它的缩放效果真的很差。它变得很模糊或扭曲。它最终会做到的，但它并不完美。当我调整尺寸时，它开始变形。有可能改变它吗？

浏览 5提问于2013-08-20得票数 0

回答已采纳

1回答

将SVG的字体大小转换为NSFont大小

cocoa、svg、webkit、font-size、nsfont

SVG规范这样描述字体大小：“此属性是指在多行布局环境中设置多行文本时，从基线到基线的字体大小。对于SVG，如果提供的没有单位标识符(例如，不合格的数字，如128)，则SVG用户代理将作为当前用户坐标系中的高度值处理。”我想知道的是Webkit如何将这个值映射到OS中的实际NSFont pointSize。简单地将这个值作为大小传递给NSFont似乎是不够的，即使考虑到用户坐标和pt的一些缩放。我猜这是因为NSFont的pointSize不符合<em

浏览 3提问于2014-02-06得票数 0

1回答