相关疑难解决方法(0)
如何在SVG中限制或剪辑文本？
我在SVG中做了一个表,我想用动态填充数据.这意味着我不知道文本占用了多少空间,我想要剪切或隐藏重叠的文本.我怎么能在SVG中做到这一点？
我的带有SVG的HTML文档如下所示:
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text> <text x="160" y="100">12</text>
<text x="100" y="115">Pear</text> <text x="160" y="115">7</text>
<text x="100" y="130">Banana</text> <text x="160" y="130">9</text>
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text>
<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
</svg>
</body>
</html>
这将呈现给:
有什么方法可以剪辑我的SVG-"桌子"的文字吗？
从Erik的答案中实施解决方案:
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="10" y="20" clip-path="url(#clip1)">Orange</text>
<text x="10" y="35" clip-path="url(#clip1)">Pear</text>
<text x="10" y="50" clip-path="url(#clip1)">Banana</text>
<text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text>
<text x="70" y="20">12</text>
<text x="70" y="35">7</text>
<text x="70" y="50">9</text>
<text x="70" y="65">2</text>
<line x1="67" y1="5" …31
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
在SVG中添加省略号以溢出文本？
我正在使用D3.js. 我想找到一个等同于这个CSS类的SVG,如果文本流出其包含的div,它会添加省略号:
.ai-ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);
}
这是我的SVG:
<g class="bar" transform="translate(0,39)">
<text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>
<rect height="13" width="123"></rect>
</g>
它的生成如下:
barEnter.append("text").attr("class", "label")
.attr("x", -3).attr("y", function() { return y.rangeBand() / 2})
.attr("dy", ".35em").attr("text-anchor", "start")
.text(function(d) {
return d.Name;
});
目前,文本溢出并与rect元素重叠.
有什么方法可以说"如果文字超过一定宽度,裁剪它并添加省略号"？
26
推荐指数
推荐指数
3
解决办法
解决办法
3万
查看次数
查看次数