我想<text>在SVG中显示一个自动换行到容器<rect>的内容,就像HTML文本填充<div>元素一样.有办法吗？我不想使用<tspan>s 来定位线条.
我有一个简单的SVG文件在Firefox中可以正常查看 - 它使用foreignObject包含一些HTML的文本框中的一些包装文本 - 文本包含在div中:
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>
但是,没有任何数量的调整可以使其作为HTML文档中包含的<svg>元素工作.div总是最终只是与文档中的其他div一起流动.
这基本上是不可能的,或者我在命名空间或其他方面犯了一些错误.但是,任何人都可以将上述SVG包装在HTML文档中并让它在给定位置(相对于SVG或其容器,当然)的给定宽度x高度的框中显示文本吗？
我没有在HTML中看到SVG中的HTML示例,这让我觉得我很愚蠢或者不可能 - 互联网上的例子似乎只是如上所述在SVG中嵌入HTML.我会更深入.
我有一个交互式SVG - 以全窗口大小显示.我想为它添加一些按钮.是否可以<button>在<svg>标签内添加普通元素？
我想不是,但我问的是SVG是否有类似的东西.
从一些图纸我得到这样的坏结果:https:
//jsfiddle.net/pvxr6g8k/1/
<svg version="1.1" id="svg9723" height="768" width="1268">
<g style="fill:#e6e6e6" id="g3332-7" transform="matrix(0.27404175,0,0,-0.447665,86.580009,508.16151)">
<g style="fill:#e6e6e6" clip-path="url(#clipPath3336-0-0)" id="g3334-7">
<g style="fill:#e6e6e6" transform="translate(992.5469,164.3086)" id="g3340-6">
<path inkscape:connector-curvature="0" id="path3342-2" style="fill:#e6e6e6;stroke:#241a5d;stroke-width:4.48957968;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -6.937,0 -12.58,5.645 -12.58,12.58 l 0,63.277 c 0,6.937 5.643,12.581 12.58,12.581 l 279.488,0 c 6.936,0 12.58,-5.644 12.58,-12.581 l 0,-63.277 C 292.068,5.645 286.424,0 279.488,0 L 0,0 Z"></path>
</g>
</g>
</g>
<text transform="scale(0.9324557,1.072437)" id="text3390-1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.87269115px;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, Bold';writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" x="413.18262" y="390.15326">
<tspan style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold'" y="390.15326" x="413.18262" id="tspan3392-0" …