在SVG中对齐文本

文章/答案/技术大牛

发布

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回答

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文档。我遇到的主要问题是让文本与线段对齐。对于水平对齐，我可以将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

点击加载更多

Inkscape文本区域左侧的正方形是什么？

如何使用文本锚点:在fabric js中居中

当用div包装时，flex内部的SVG不对齐

HTML中的内联SVG对齐方式