Svg文字和形状像html

Question

我需要这样的svg 我的意思是当大区域设置文本时，文本不会去形状区域并打破新行，当获得广域填充所有空间

-------------- |-------------------| 
|    | |     | 
| some shape | | set some text | 
|    | |     | 
    -------------- |     | 
-----------------|     | 
|         | 
|         | 
|         | 
|____________________________________| 

我尝试了一些我的搜索结果，但不起作用。 我觉得这很简单。 我的英语很糟糕，所以我不知道用什么关键字来得到我的结果。 我想用PDF导出pdf，需要这种样式的文本。 谢谢。

Answer 1

如果您熟悉SVG元素，SVG很容易手工创建。

<svg width="400" height="280"> 
 
    <rect x="2" y="2" width="170" height="120" 
 
     fill="none" stroke="black" stroke-width="4"/> 
 
    <text x="85" y="70" 
 
     font-size="20" text-anchor="middle">some shape</text> 
 

 
    <path d="M 200,2 L 398,2 L 398,278 L 2,278 L 2,150 L 200,150 Z" 
 
     fill="none" stroke="black" stroke-width="4"/> 
 
    <text x="300" y="70" 
 
     font-size="20" text-anchor="middle">set some text</text> 
 
</svg>

如果你不认为你可以手动创建SVG，那么你应该使用矢量编辑器。有很多，但免费的是Inkscape。