css - 无法设置 SVG 文本的最大宽度
问题描述
我有一个非常简单的页面和任务,但令我沮丧的是,我无法让我的文字正确呈现max-width
。我看过:读取 d3 文本元素的宽度,什么 CSS 可以使某些内容转到页面的下一行?,除其他外,但我仍然无法弄清楚。
不是 svg 文本很好地流到下一行,而是在页面上蔓延,直到超出范围。这是我的CSS和代码
var svg = d3.select('body').append('svg')
.attr('width', 300)
.attr('height', 200);
var textG = svg.append('g');
textG.append('text')
.attr('x', 20)
.attr('y', 30)
.attr('class', 'myText')
.text('This line should be about three to four lines long, but because I am so stupid I cannot make it do what I want it to do. Woe is me.');
.myText {
font-size: 1.3em;
fill: gray;
width:10%;
max-width:10%;
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
问题:我可以从 CSS 端或 JS 端做什么来使我的 svg 文本采用最大宽度样式规则?我希望它进入下一行,而不是在第一行的范围内无限前进。
解决方案
您可以做的是将您的字符串拆分为三个或四个部分,然后<tspan>
在一个<text>
元素中使用多个元素,而不是将整个文本插入到<text>
.
另一种解决方案是使用<foreignObject>
.
这是一个小提琴:
var svg = d3.select('body').append('svg')
.attr('width', 350)
.attr('height', 500);
var textG = svg.append('g');
var fullTxt = 'This line should be about three to four^lines long, but because I am still^learning stuff, I cannot make it do^what I want it to do. Woe is me.'
var b = fullTxt.split('^');
textG.append('text')
.attr('x', 20)
.attr('y', 30)
.attr('class', 'myText')
.selectAll('tspan').data(b)
.enter().append('tspan')
.text(function(d) {
return d;
})
.attr("textLength", 250)
.attr("lengthAdjust", "spacingAndGlyphs")
.attr('dy', '1em').attr('x', '15');
.myText {
font-size: 1.3em;
fill: gray;
width: 10%;
max-width: 10%;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
推荐阅读
- soap - 更改 zeep 绑定
- python - Cron Job 未在 centos 7 中执行
- agens-graph - 如何在 AgentGraph 上找到锁定等待查询?
- swift - 明天如何将 NSDate 存储到 Firebase 中?
- r - 如何将参数传递给 PowerBI Embedded Report
- merge - OWL API 合并个人
- windows - 一个循环中的两个条件(批处理文件)
- node.js - 如何将检索到的文本与我的预期文本进行比较?
- javascript - 在发送到后端之前过滤并将记录的 blob 转换为 mp3
- c# - 如何在 Unity 中使用包含 Xamarin.iOS 的库?