RaphaelJS에서 자동으로 텍스트를 너비로 줄입니까?

Question

현재 RaphaelJS를 사용하여 동적으로 추가 된 일부 텍스트를 추가하려고합니다. 텍스트를 200 픽셀로 끊고 다음 줄로 계속 진행합니다. HTML에서 너비가 정규 DIV 인 경우처럼.

https://jsfiddle.net/qLvuztcy/

내가 좋아하는 뭔가를 시도했다 :

.text { 
    width: 200px; 
    max-width: 200px; //and this 
} 

을하지만 어떻게 작동하는지 그 불행하게도,이 아니다. 아무도 내가 이것을 어떻게 달성 할 수 있는지 안다? 나는 텍스트에 \n을 추가하는 것이 새로운 라인을 만들 것이라는 것을 알고 있지만, 나는 내가 원하는 것을 어떻게 성취 할 것인지 잘 모른다.

Answer 1

SVG에는 자동 텍스트 배치가 없습니다. 어쨌든 현재 버전이 아닙니다.

텍스트를 직접 줄 바꿈해야합니다. 또는 SVG를 브라우저에 표시하는 경우 SVG에 HTML을 포함 할 수 있습니다. <foreignObject> 요소를 사용하여이 작업을 수행 할 수 있습니다.

Raphael에 foreignObject 요소를 만들기위한 API가 있는지 확실하지 않습니다. 조사를해야합니다.

Answer 2

I found an answer (일부 수정 한 Snap.svg) 그러나 완벽하게 작동합니다. (나는 그것을 다른 장소도를 사용하기 때문에, 수도뿐만 아니라) 내가 jQuery를 함께 find("tspan")을하고있는 중이 야으로

function text(x, y, txt, max_width, element_class) { 
    var abc = "abcdefghijklmnopqrstuvwxyzæøåABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ"; 
    var temp = rsr.text(50, 50, abc); 
    temp.node.classList.add("text"); 
    var letter_width = temp.getBBox().width/abc.length; 
    temp.remove(); 

    var heights = []; 

    var loopLines = txt.split("\n"); 
    for (j = 0; j < loopLines.length; j++) { 
     var words = loopLines[j].split(" "); 
     var width_so_far = 0, 
      current_line = 0, 
      lines = ['']; 
     for (var i = 0; i < words.length; i++) { 
      var l = words[i].length; 
      if (width_so_far + (l * letter_width) > max_width) { 
       lines.push(''); 
       current_line++; 
       width_so_far = 0; 
      } 
      width_so_far += l * letter_width; 
      lines[current_line] += words[i] + " "; 
     } 

     if (j > 0) { 
      y += heights[j - 1]; 
     } 

     lines = lines.join("\n"); 
     var t = rsr.text(x, y, lines); 
     $(t.node).find("tspan").attr("dy", "1.2em"); 
     t.node.classList.add(element_class); 
     heights.push(t.getBBox().height); 
    } 
} 

는 jQuery를 필요합니다.

문자열에 \n을 지원하도록 수정했습니다.