在SVG中对齐文本
在SVG（可缩放矢量图形）中，对齐文本需要使用<text>元素，并设置相应的属性。以下是一些常用的属性和它们的描述：
x和y属性：用于设置文本框的左上角坐标。text-anchor属性：用于设置文本的水平对齐方式，可选值包括start、middle和end。dominant-baseline属性：用于设置文本的垂直对齐方式，可选值包括auto、use-script、no-change、reset-size、ideographic、alphabetic、hanging、mathematical和central。
以下是一个示例代码，展示如何在SVG中对齐文本：
<svg width="500" height="300">
<rect x="10" y="10" width="480" height="280" fill="white" stroke="black" />
<text x="250" y="150" text-anchor="middle" dominant-baseline="central" font-size="30">
居中对齐文本
</text>
</svg>在这个示例中，我们创建了一个SVG画布，并在其中绘制了一个矩形。然后，我们添加了一个<text>元素，并设置了x和y属性为250和150，这是文本框的中心点。我们还设置了text-anchor="middle"和dominant-baseline="central"，以使文本在水平和垂直方向上居中对齐。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
Inkscape文本区域左侧的正方形是什么？
textbox、inkscape
我注意到Inkscape上的文本框左侧有一个看起来像手柄的正方形：
有人用过这个吗？
浏览 2提问于2017-10-06得票数 0
回答已采纳
2回答
如何使用文本锚点:在fabric js中居中
javascript、svg、canvas、fabricjs
我从fabric js中创建了svg。在创建卡片时，我使用以下代码将文本对齐应用于对象： textAlign : 'center',canvas.renderAll();
现在，当我用原始值更改{company_address}地址变量时，该文本应该是对齐中心，但它不是。然后我手动修改了SVG，在SVG
浏览 1提问于2018-03-22得票数 0
回答已采纳
2回答
当用div包装时，flex内部的SVG不对齐
html、css、svg、flexbox
我想要一个未知大小中心的SVG图标对齐一些文字的左边。我最好用flex。这是SVG和文本容器的CSS： background-color: pink; align-items: center;margin: 10px;}
<div class="container">
<svg style="width:24px;heig
浏览 1提问于2019-02-19得票数 4
回答已采纳
2回答
HTML中的内联SVG对齐方式
html、svg、alignment
我目前在绑定DIV中正确地对齐内联SVG时遇到了问题，就像这个例子一样。 </svg></body>SVG会调整大小以匹配div的尺寸，但我无法为SVG</em
浏览 1提问于2012-01-26得票数 4
回答已采纳
2回答
在SVG中对齐文本
css、svg
如何在不手动对齐的情况下对齐SVG中文本？目前，我已经手动设置了文本在矩形内的位置。这是很好的，直到文本的值改变，然后它看起来关闭，并不真正工作。有没有一种方法可以自动将文本设置为居中对齐，类似于text-align:center，以便根据页面进行响应？ <rect width=&
浏览 2提问于2015-07-20得票数 3
1回答
CSS中SVG的垂直对齐
html、css、svg、alignment、vertical-alignment
我有一个关于内联SVG对齐的问题。我已经创建了一个带有一些文本和SVG的按钮。虽然当SVG至少与文本一样大时，对齐可以正常工作，但当SVG高度小于文本时，对齐就会失败。如果仔细观察，就会发现第二个大小写并不完全对齐，因为SVG的高度小于文本的高度。测试用例：
浏览 3提问于2016-03-13得票数 32
回答已采纳
2回答
在SVG中对齐文本
xml、svg
我正在尝试制作混合有行和简短文本片段(通常是两个或三个单词)的SVG XML文档。我遇到的主要问题是让文本与线段对齐。对于水平对齐，我可以将text-anchor与left、middle或right一起使用。我找不到垂直对齐的等价物；alignment-baseline似乎不能做到这一点，所以目前我正在使用dy="0.5ex"作为中心对齐的拼凑工具。
是否有适当的方式与文本的垂直中心或顶部对齐？
浏览 1提问于2008-09-11得票数 70
回答已采纳
1回答
SVG定位类位置:绝对
svg
我试图在根元素中定位一个内部元素。根元素被设置为100%高和100%宽。但是，我希望内svg与外svg边缘的距离为10px左右--除了右边缘之外，我希望右边缘与外右边缘之间的距离为200px。我希望这在web浏览器中显示，因此用户应该能够调整浏览器的大小，从而调整外部svg，而内部svg应该能够保持与外部svg在每一侧的正确距离。如下所示：
+OUTER SVG----------------------------
浏览 1提问于2011-08-11得票数 5
2回答
垂直对齐SVG文本与其他SVG对象以使用Inkscape
text、svg、vertical-alignment、inkscape
我试图在另一个SVG对象下对齐SVG文本。这个带有SVG行的示例在Firefox中运行得很好： <line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
<text然而，遗憾的是Inkscape还不支持与dominan
浏览 4提问于2014-04-19得票数 3
1回答
在引导4行中对齐SVG元素
css、svg、flexbox、twitter-bootstrap-4
我想将图标(<svg>)和文本对齐到容器的中心。我希望图标和文本之间有一个很小的间隔：我如何实现这一点(不管有没有BS网格) ?？
浏览 0提问于2017-12-08得票数 4
回答已采纳
4回答
如何在HTML/CSS中将文本基线垂直对齐到设置点
html、css、svg
我已经创建了一个算法，可以将SVG格式的文本转换为HTML，该算法工作得很好，但与SVG相比，HTML版本中的文本定位略有偏差。
我意识到这是由于SVG中的坐标系；它的原点在左下角而不是左上角。因此，我的HTML文本低于它应该在的位置。这是为商业软件，个人而言，我宁愿保留为SVG的文本，但我不能因为客户的要求，这也需要一个像素完美的副本！为了修复HTML，我需要对齐文本，使其基线位
浏览 0提问于2011-07-15得票数 3
回答已采纳
1回答
javascript动态创建span并垂直对齐文本:文本停留在底部
javascript、svg
我试图生成一个svg矩形和一个span，以便span元素中的文本与svg元素垂直对齐。在声明式HTML+CSS中，我设法做到了。但我不能用javascript来做。在这里，我的javascript代码：==============================*/
var svg = document.createElementNS("http://
浏览 1提问于2015-09-28得票数 1
回答已采纳
2回答
在屏幕中央放置一个SVG
html、css、svg
我想把一个SVG文件放在屏幕的中心，这样它就占据了屏幕的25%，但是它保持了它的比例(也就是说，它不会比它高)。<!title>JS Bin</title><body>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg" alt=&
浏览 4提问于2014-11-13得票数 0
回答已采纳
1回答
如何在链接按钮内对齐svg图像和文本？
css、bootstrap-4
我创建了一个按钮，在左边使用svg图像图标，在右边使用文本，但我无法将文本作为图标在中间对齐。
似乎文本“授权”是对齐的顶部，而不是中心相对于图标的中间。
<button class="btn
浏览 2提问于2021-06-11得票数 0
回答已采纳
1回答
Google图表从右到左
javascript、html、css
我正在使用Google Charts在我们的网站上显示图表。我可以找到<svg>元素并将style="direction: rtl;"添加到其中。这将修复文本对齐，但它会丢弃其他所有内容。我希望文本从右到左对齐。
在load函数中设置{'langugae': 'he'}
浏览 1提问于2021-06-28得票数 0
3回答
图像注释和图表编辑器
windows、images、image-editor、presentation
到目前为止，我一直在使用画图和Gimp来注释图像，但是绘画基本上破坏了图像，而Gimp破坏了我的神经。绘制可调整大小的选择(如Gimp选项)在不同的层上进行的注释添加我以后可以编辑和移动的文本在
浏览 0提问于2014-05-20得票数 13
回答已采纳
2回答
更新的生命周期事件:只在dom更新特定元素后使用监视器执行操作。
vue.js、vuejs2
在Vue中有'updated‘生命周期方法，它适合在数据进入之后对我的标记进行处理。在我的例子中，由于新的文本被输入，所以在SVG文本的尺寸发生变化后，我手动地推动SVG文本对齐。嗯，我似乎想使用'watch‘块，因为它允许我只在特定属性更改后才运行对齐函数，但我真正需要的是使用'updated’事件，因为它与DOM有关，而不是数据--但是，如何能够<
浏览 2提问于2018-03-21得票数 6
回答已采纳
1回答
将SVG文本在SVG形状内居中，在刷新之间保存JavaScript变量值
javascript、html、svg
我想知道是否有一种方法可以使我的SVG数字在显示框中居中，而不用看它，是否有一种方法可以在刷新之间保存变量“count”的值，或者是否可以通过按下按钮来刷新变量“one”、“two”和“three”的值size="500">Lucky Number Slots</font>
</center&
浏览 2提问于2014-05-19得票数 2
2回答
svg附加文本元素-给我错误的宽度
javascript、text、svg、width、element
我通过javascript将一个文本元素附加到svg中。在添加之后，我想设置x和y坐标，然而，当我使用它来计算x时，它返回了错误的文本元素的宽度。有趣的是:在Chrome中，当通过F5或按钮实现页面时，它返回错误的宽度，当在地址栏中按enter时，宽度是正确的-奇怪！下面是小代码：
var capt = document.createElementNS("http://www.w3.org/2000/<
浏览 0提问于2011-12-06得票数 2
回答已采纳
1回答
缩放SVG以填充父div/td
html、css、svg
我希望SVG完全适合包含TD的内容。SVG的比例不需要保留。相反，当高度应该大于宽度时，SVG的高度与宽度相同。SVG的下方和上方都有填充。'> <svg viewBox='0 0 100 100' preserveAspectRatio="none"></svg似乎正在发生的
浏览 0提问于2015-11-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
