时间戳

首页 > 解决方案 > svg 形状是根据里面的文字增长的吗？

xml - svg 形状是根据里面的文字增长的吗？

问题描述

我试图想出一个可以动态适应文本大小的 SVG。这是我到目前为止的想法：

 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
  <title>simulated wrapping in svg</title>
  <desc>A foreignObject container</desc>

   <!-- Text-Elemente -->
   <foreignObject
      x="100" y="100" width="200" height="150"
      transform="translate(0,0)"
   >
      <xhtml:div style="padding:10px; color:black; text-align:center; background-color: red;">Demo test dasdasdasdasdasdasdasdas is supposed to be asdqe arasd qweewsdord-wrappsdaed sdasdadomewhere along the line to show that it is indeed possible to simulate ordinary text containers in svg.dsadasds</xhtml:div>
      
      
   </foreignObject>
</svg>

这是一个好的开始，这里的主要问题是我需要在形状中使用的尺寸（HxW）之前知道。我可以根据字符以某种方式计算它。但我只是想知道是否有一种简单/更简单的方法来实现这一目标？正如您在示例中看到的那样，文本溢出了框，如果我输入较短的文本，框将在下面有这个间隙。

标签： xmlsvgxhtml

解决方案

推荐阅读