svg의 text 사용법, textspan을 이용해서 줄바꿈 해보기.
svg에서 text를 사용하기.
- 저는 입력받은 데이터를 이용해서 비교적 간단한 그래프를 그려주고, 특정 부분에 마우스를 올렸을 때 필요한 데이터가 뜨도록 하는 작업을 수행하고 있습니다.
- 즉, 해당 요소 위에 마우스가 올라오면, 그 위치에 새로운 text 요소를 만들어주고, 마우스가 벗어나면 그 텍스트 요소의 id를 선택해서 지워주는 작업을 진행하고 있죠.
- 일단 이 말만 보면 그렇게 어려운 일처럼 느껴지지는 않습니다.
- 그러나, 해당 텍스트가 지나치게 길어질 경우에 문제점들이 발생하죠.
- 예를 들어서, 줄바꿈이나, html의 기본 태그들(
<br>)들이 먹히지 않는다는 단점이 있습니다. 마찬가지로\n도 사용되지 않습니다.
- 예를 들어서, 줄바꿈이나, html의 기본 태그들(
- 우선 더 진행하기 전에
text라는 요소부터 정확하게 알아보도록 합시다.
text tag in svg
- 텍스트 태그는 그냥 svg 내에서 텍스트를 표시하기 위한 방법 중 하나입니다.
-
기존의 html 에서는
p등으로 표시를 했는데, 이것과의 차이는text의 경우 위치할 수 있는 좌표를 잡을 수 있다는 것이 차이죠. - 아래에서 몇 가지는 테스트 해봤습니다.
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<style>
/*
- 가능하면 모든 svg도 div에 넣어서 처리해주는 것이 효과적임.
- 아래처럼 div에 넣어서 전체 크기를 세팅하고, 그 다음에 svg를 세팅하는 것이 가장 바람직함.
*/
div{
border:1px solid;
height:100px;
}
svg{
/*이미 상위 요소인 div에서 크기가 맞춰져 있기 때문에 모두 100%로 해두는 것이 좋음*/
width:100%;
height:100%;
}
</style>
<body>
<!--
- 같은 태그지만, svg내에 있을 때와 svg 밖에 있을때 서로 다름.
- 즉, 기본적으로 text 태그는 svg 내에서만 유효하다고 생각하면 좋음.
- 해당 텍스트의 좌표, 색깔등을 지정할 수 있음.
-->
<div>
<text x="100" y="15" fill="red">
This is not text tag in svg
</text>
</div>
<div>
<svg>
<text x="100" y="15" fill="red">
This is text in svg
</text>
</svg>
</div>
<div>
<svg>
<text x="100" y="15" fill="red">
<!--
- 아래처럼 텍스트가 길어질 경우에 그냥 전체 svg를 벗어나게 됩니다.
- 당연하지만, Html 에서 줄바꿈이 있다고 해도 적용되지는 않죠.
-->
This is longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text in svg
</text>
</svg>
</div>
<div>
<svg>
<text id="abcd" x="100" y="15" fill="red">
<!--
- javascript에서 스트링을 넣어준다고 해도,안 되는 것은 마찬가지입니다.
- console.log를 통해서 출력할 때는 '\n'으로도 되는데, 그렇지 않을때는 안됩니다.
- 특히, text 태그 내에서는 안됩니다.
- 즉, 이를 해결하기 위해서는 tspan을 이용해서 구분해서 보여주는 것이 제일 좋은 것 같습니다.
-->
</text>
</svg>
</div>
<div>
<svg>
<!--그 외에 tspan을 넣을 수도 있습니다.-->
<text x="100" y="15" fill="red">
This is text in svg and more textspan
<!-- 좌표를 똑같이 지정했기 때문에 겹쳐서 나오게 됩니다.-->
<tspan x="200", y="100">First tspan</tspan>
<tspan x="200" , y="100">second tspan</tspan>
</text>
</svg>
</div>
<div>
<svg>
<!-- tspan은 text 태그 안에서만 유효합니다. 아래 코드는 보이지 안습니다.-->
<tspan x="200" , y="100">This will be not shown</tspan>
</svg>
</div>
<div>
<svg>
<!--이렇게 하면 보이죠. -->
<text>
<tspan x="200" , y="100">This will be shown</tspan>
</text>
</svg>
</div>
<div>
<svg id="with_script">
<text id="target_text" x="100" y="15" fill="red">
</text>
</svg>
</div>
<script>
d3.select("#abcd").text("longlong".repeat(20)+"\n"+"<br/>"+"bbb"+ "longlong".repeat(20));
var str_lst = ["aaa", "bbb", "ccc"];
var d_lst = [];
for(var i=0;i< str_lst.length ;i=i+1){
// 아래처럼 정확한 포지션을 넘기는 것이 아니라, %로 넘길 수도 있음.
// 이렇게 해도 되는 건줄 알았으면 굳이 정확한 포지션을 잡지 않아도...후....
// 배움에는 끝이 없다 하하하하하하하하
d_lst.push({
"x":30*(i+1)+"%", "y":30*(i+1)+"%", "s":str_lst[i]
})
}
d3.select("#with_script").select("text").selectAll("tspan").data(d_lst)
.enter().append("tspan")
.attr("x", function (d) { return d["x"] })
.attr("y", function (d) { return d["y"] })
// dx, dy는 각각 정해진 좌표에서 각 축으로 움직일 것인지를 의미하는듯.
.attr("dx", function (d) { return "-30%" })
.text(function(d){return d["s"]})
</script>
</body>
</html>
wrap-up
- 정리하면 다음과 같습니다.
- text는 svg 내에 포함되어 있어야 합니다.ㅏ
- tspan은 text 내에만 들어갈 수 있습니다. 따로 있으면 안 보여집니다.
- 좌표는 반드시 픽셀로 넣어야 하는 것이 아니고, x, y 모두 퍼센트를 가지고 넣을 수 있습니다.
- text, tspan 모두 어떻게 해도 줄바꿈을 넣을 수 없습니다. 넣고 싶다면, 반드시 tspan을 사용해서 보여줘야만 합니다.
댓글남기기