Невозможно установить максимальную ширину текста SVG - PullRequest
Новая
       6

Невозможно установить максимальную ширину текста SVG

0 голосов
/ 01 июня 2018

У меня очень простая страница и задание, но, к моему ужасу, я не могу заставить свой текст взять правильную max-width.Я посмотрел на: ширина чтения текстового элемента d3 , Что такое CSS, чтобы заставить что-то перейти на следующую строку на странице? , среди прочего, но я до сих пор не могу понятьit out.

Вместо того, чтобы текст 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 принял максимумправило стиля ширины?Я хочу, чтобы он перешел на следующую строку, а не бесконечно шел по границам первой строки.

1 Ответ

0 голосов
/ 01 июня 2018

Что вы можете сделать, это разбить вашу строку на три или четыре части, а затем использовать несколько элементов <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...