css - 文本溢出不起作用

标签 css svg

请检查下面的示例 svg 代码。我在文本元素中使用了文本溢出属性。但是,属性行为无法正常工作。

<svg width="180" height="120" viewBox="0 0 180 120">
<style>
  text { font: 16px sans-serif; }
  rect { fill: none; stroke: black; vector-effect: non-scaling-stroke; stroke-width: 1; }
</style>

<g>
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100">SVG is awesome</text>
</g>

<g transform="translate(0,30)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="clip">SVG is awesome</text>
</g>

<g transform="translate(0,60)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="ellipsis">SVG is awesome</text>
</g>
</svg>

SVG-text 元素是否支持 text-overflow 属性?我如何在 svg 元素中使用此属性?

谢谢。

最佳答案

text-overflow 不是当前 SVG 1.1 的一部分。标准。

新的 SVG 2 规范正在进行中并且 text-overflow计划包含在其中。 UA 开始实现 SVG 2,但到目前为止只有 Opera 12 实现了文本溢出。

与此同时,您也许可以通过 foreignObject 将文本包含为 html,因为 html 文本确实支持文本溢出。

关于css - 文本溢出不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20628173/

相关文章:

javascript - IE8+ 中的 SVG 支持

javascript - 如何正确使用SVG checkintersection()函数?

javascript - D3 - 刷图表时重置缩放?

html - 高度的响应图像纵横比

javascript - 使用 php artisan serve 无法在公共(public)文件夹中加载任何 js/css?

javascript - Three.js 的输入标签不起作用

javascript - 使用浏览器的访问键在所有链接的第一个字符下划线

svg - inkscape插件可实时编辑svg代码

android - Lollipop 设备上的矢量可绘制渲染问题 (API22)

javascript - 无法在滚动条上分配背景颜色