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
相关·内容
1回答
像this、this、this、this和this这些关于SVG缩放的问题也没有帮助。 缩放SVG文档时，缩放字体大小的最佳方法是什么？ 假设原始SVG文档大小为500x1000。为了适合我们的设计视窗，我们将文档缩放到250x500，并允许用户进行一些编辑，如重新定位和更改文本。编辑完成后，我们将缩小到500x1000，然后再导出为PNG图像。目前，我们手动重新计算每个比例的<e
浏览 56提问于2019-01-02得票数 0
当火狐的“最小字体大小”设置为15时，svg中的文本会变得非常大。注意:它是一个img，其中的src是一个.svg文件。预期：svg中的文本显示为正常。
实际结果：svg中的文本被放大。
如何设置最小字体大小: Firefox >首选项>语言和外观>字体和颜色>高级>设置最小字体大小为15
浏览 2提问于2019-05-01得票数 4
1回答
我正在使用一些生成html的工具编写文档。我想在我的网页中嵌入一些高质量的数字，这些数字对应于：
还有其他方法嵌入这些数字吗？
浏览 4提问于2013-10-09得票数 1
回答已采纳
1回答
问题如下:我们在图表上有一些工具提示，在缩放图表时，它们会相应地平移，即保持它们与图表元素相关的位置，但工具提示及其文本的大小不应缩放。现在一切缩放，无论是工具提示和文本，它通常是正确的，但不知何故，我们必须重新设置缩放的文本，以保持它的可读性或找到计算正确位置的方法。
谢谢。
浏览 3提问于2013-11-26得票数 0
1回答
规模SVG但没有其他？
、、、、
我仍然在玩D3和绘制SVG元素，我决定尝试制作一个可以根据轨道板(两指触摸展开)进行缩放的图形，或者是一个shift +滚动轮移动，但是其他的东西都保持原样。我注意到，当我尝试这些动作时，整个页面都在缩放。不幸的是，我不知道该怎么做。
$('#target').html('<svg height="200" width="200"><rect width="100" height="10
浏览 1提问于2015-03-04得票数 0
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回答
我有一个代码，可以生成一个从HTML表的SVG图像。我想在SVG中看到我的HTML table 1:1。这里的问题是什么？
浏览 0提问于2012-12-17得票数 0
Problem：我们需要复制RaphaelJS中创建的SVG文本，在RaphaelJS中使用可变字体、字体大小、位置、缩放、旋转。
但是.包围框的高度是基于字体大小和字体系列的，但与实际字符串无关。因此，“Y”和“，”(字体和字体大小相同)的字符串具有相同的高度。当我们在SVG中重新创建文本时(通过在PHP中生成文本)，我们可以得到字体大小的正确，以及字体家族的正确。然而，SVG的高度并不独立于实际的字符串。所以“，”会比“Y”低得多
浏览 3提问于2012-02-09得票数 6
1回答
我已经在svg元素上设置了viewBox和preserveAspectRatio属性以获得响应性，但是这扩展了包括文本在内的所有svg元素。我尝试将字体大小设置为属性和CSS，但是文本元素继续与图表的其余部分一起缩放。height", '100%').attr('preserveAspectRatio','xMinYMin')
浏览 1提问于2019-04-02得票数 3
2回答
我在缩放SVG文档时遇到了问题。它包含在HTML文档中： <path class="path_class" ...z"/>我尝试使用CSS进行缩放，如下所示
浏览 4提问于2014-01-24得票数 0
回答已采纳
1回答
我有这个我读过拉斐尔如何scale画布的文档，但没能成功。有人知道如何缩放raphael.svg吗？
浏览 0提问于2013-11-16得票数 0
回答已采纳
1回答
所以当我有下面的css时： max-width: 400px;尽管有175和35的常量值，50%的位置仍然在相同的位置，如果我像这样更改CSS： max-width
浏览 2提问于2016-03-23得票数 0
3回答
我想在svg中缩放一个文本。如果我使用字体大小，宽度和高度都会被缩放。有没有办法只缩放宽度或高度？-我找到的所有使用scale标签的例子都不起作用，或者对文本不起作用。
谢谢你的帮助，亨德里克
浏览 1提问于2011-11-05得票数 7
回答已采纳
5回答
我有一个与html代码内联的SVG。它的缩放，以适应宽度与保持高宽比。是否有一种方法可以将字体大小固定到可以通过媒体查询控制的视口？编辑：问题是，当我在宽度范围内设置固定的字体大小时，字体会相对于svg大小进行调整。 font-size: 14px;
#svg-containersvg text
浏览 4提问于2017-04-25得票数 10
回答已采纳
1回答
特例、网页字体或位图
、、、、
我试着用cufon 来转换这个字体，但是它的缩放效果真的很差。它变得很模糊或扭曲。它最终会做到的，但它并不完美。当我调整尺寸时，它开始变形。有可能改变它吗？
浏览 5提问于2013-08-20得票数 0
回答已采纳
1回答
SVG规范这样描述字体大小：“此属性是指在多行布局环境中设置多行文本时，从基线到基线的字体大小。对于SVG，如果提供的没有单位标识符(例如，不合格的数字，如128)，则SVG用户代理将作为当前用户坐标系中的高度值处理。”我想知道的是Webkit如何将这个值映射到OS中的实际NSFont pointSize。
简单地将这个值作为大小传递给NSFont似乎是不够的，即使考虑到用户坐标和pt的一些缩放。我猜这是因为NSFont的pointSize不符合<em
浏览 3提问于2014-02-06得票数 0
1回答
我在缩放和对从文件加载的SVG中心有问题。使用Snapsvg将SVG文件加载到的是#svg容器：它装载了SVG：当我缩放它时：浏览器如何检查它：我的JS：var g = s.group();
var tux = Snap.load("svg/roulette.svg&
浏览 1提问于2016-04-28得票数 0
回答已采纳
这是为我的svg标记注册缩放监听器的代码function{}
svg.call(zoomList
浏览 7提问于2014-03-10得票数 5
回答已采纳
我有一个SVG，里面有很多元素。我也有一个弹出式元素，这是显示在一个元素点击。当我缩放SVG时，弹出窗口不应该被缩放。如何防止此弹出窗口随SVG缩放？
浏览 25提问于2018-08-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
