Обрезать (с помощью многоточия) текст SVG до заданной ширины пикселя

Question

Обрезать (с помощью многоточия) текст SVG до заданной ширины пикселя

я не знаю, что вы пытаетесь сделать. Но лучше загружать их по запросу, а не удалять на некоторых условиях.

$.getScript('helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! 
     ');
  });

Если вы хотите удалить скрипты перед выполнением, это невозможно. Но то, что вы можете сделать, это удалить скрипт программно при условии & amp; если есть проблема с утечками памяти, тогда вы можете вызвать код ниже, чем удалить скрипт.

var var1 = 'hello';
var cleanAll = function () {
    delete window.var1;
    delete window.cleanAll;
};

// unload all resources
cleanAll();

3

reactjs typescript svg text ellipsis

задан beth 27 February 2019 в 03:48

2 ответа

Другие вопросы по тегам:

reactjs typescript svg text ellipsis

Похожие вопросы:

score 0 · Answer 1

У меня та же проблема. Я попробовал способ, предложенный лунатизмом, но он не работал для меня. Я использовал это немного по-другому с хуком api, useRef и useLayoutEffect. Поэтому я предложил другое решение, использующее foreignObject в svg. Таким образом, мы можем использовать стандартные решения html и css.

  <foreignObject x={0} y={0} width={maxTextwidth} height={20}>
    <div style={{textOverflow: 'ellipsis', with: maxTextwidth, overflow: 'hidden', whiteSpace: 'nowrap'}}>
      Long text to use ellipsis on
    </div>
  </foreignObject>

score 0 · Answer 2

textObj является нулевым в методе рендеринга. Вы должны это использовать в componentDidMount(). Затем создайте массив ref, в противном случае ссылка будет переопределена каждым элементом цикла.

export class Labels extends React.Component<Props> {
  textRefs = new Array(React.createRef<SVGTextElement>())

  componentDidMount() {
    const { maxTextwidth } = this.props
    this.textRefs.forEach((ref, i) => {
      placeTextWithEllipsis(
        this.textRefs[i].current,
        this.textRefs[i].current.innerHTML,
        maxTextwidth
      )
    })
  }

  render() {
    return (
      // ...
      <text
        ref={(this.textRefs[i] = React.createRef<SVGTextElement>())}
        x={rectWidth - paddingLeftRight}
        y={y + rectHeight / 2}
        textAnchor="end"
        alignmentBaseline="middle"
      >
        {...}
      </text>
      // ...
    )
  }
}