SVG元素彼此相邻 [英] Putting SVG elements next to each other

问题描述

我有一个<text>和<rect>元素嵌套在svg元素中.我希望<rect>元素在<text>结束后立即开始.但是看来我必须使用x和y定位它们.

I have a <text> and a <rect> element nested in a svg element. I want the <rect> element to begin right after the <text> ends. But it looks like I have to position them using x and y.

有没有办法像常规HTML元素一样将它们彼此相邻放置?

Is there any way to put them next to each other like regular HTML elements ?

<svg>
<text>1200</text>
<rect width='120' height='12'></rect>
</svg>

推荐答案

我似乎只能通过以下方式获得它:

I only seem to be able to get it with this:

<svg height="30" width="100">
   <text x="0" y="15" fill="red">SVG TEXT!</text>
</svg>
<svg height="30" width="100">
   <rect width='120' height='12'></rect>
</svg>

在此处查看詹姆斯·阿尔梅达(James Almeida)的笔"SVG文本和盒子测试": http://codepen. io/jimmyplaysdrums/pen/ZYdEyw/

See the Pen 'SVG Text and Box Test' by James Almeida here: http://codepen.io/jimmyplaysdrums/pen/ZYdEyw/

这篇关于SVG元素彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！