Riot.js에서 SVG를 그리려고하면 작은 시간만큼 빠졌습니다.

이 기사는 Riot.js Advent Calendar 2016의 14 일째 기사입니다.
어제에 이어 기사를 쓰겠습니다!

요 전날 Riot.js에서 SVG 이미지를 생성하는 코드를 쓰고있었습니다 만, 그 때 빠졌을 때의 이야기입니다.

아래 코드를 실행하면 이러한 이미지가 그려집니다.


svg.html

<svg-cross></svg-cross>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.js"></script>
<script type="riot/tag">
<svg-cross>
<svg width="100" height="100" version="1.1" viewbox="0 0 100 100">
  <line x1="0" y1="50.5" x2="100" y2="50.5" stroke="gray"/>
  <line x1="50.5" y1="0" x2="50.5" y2="100" stroke="gray"/>
  <line each={l in lines} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} stroke={l.color} stroke-dasharray="2,2"/>
</svg>
this.lines = [
  {
    x1: 10.5,
    y1: 10.5,
    x2: 90.5,
    y2: 90.5,
    color: 'red',
  },
  {
    x1: 90.5,
    y1: 10.5,
    x2: 10.5,
    y2: 90.5,
    color: 'blue',
  },
];
</svg-cross>
</script>
<script>
  riot.mount('svg-cross');
</script>

외형은 전혀 문제 없습니다만 콘솔 로그를 보면 대량의 에러가…

콘솔 로그 (일부 발췌)

riot+compiler.js:1994 Error: <line> attribute x1: Expected length, "{l.x1}".
  setInnerHTML @ riot+compiler.js:1994
  _mkdom @ riot+compiler.js:996
  Tag @ riot+compiler.js:1497
  mountTo @ riot+compiler.js:2454
  pushTags @ riot+compiler.js:2597
  each @ riot+compiler.js:1959
  pushTags @ riot+compiler.js:2601
  riot.mount @ riot+compiler.js:2652
  (anonymous) @ riot+compiler.js:3537
  done @ riot+compiler.js:3453
  compileTag @ riot+compiler.js:3460
  compileScripts @ riot+compiler.js:3471
  (anonymous) @ riot+compiler.js:3524
  riot.mount @ riot+compiler.js:3537
  (anonymous) @ svg.html:36
riot+compiler.js:1994 Error: <line> attribute y1: Expected length, "{l.y1}".
  setInnerHTML @ riot+compiler.js:1994
  _mkdom @ riot+compiler.js:996
  Tag @ riot+compiler.js:1497
  mountTo @ riot+compiler.js:2454
  pushTags @ riot+compiler.js:2597
  each @ riot+compiler.js:1959
  pushTags @ riot+compiler.js:2601
  riot.mount @ riot+compiler.js:2652
  (anonymous) @ riot+compiler.js:3537
  done @ riot+compiler.js:3453
  compileTag @ riot+compiler.js:3460
  compileScripts @ riot+compiler.js:3471
  (anonymous) @ riot+compiler.js:3524
  riot.mount @ riot+compiler.js:3537
  (anonymous) @ svg.html:36
  riot+compiler.js:1994 
...

line의 좌표 지정 속성으로 설정한 템플릿 변수용. (매직 넘버에서는 문제 없음)
별로 표시상은 문제 없습니다만, 콘솔 로그가 계속 나오는 것은 기분 나쁘다! (SPA로 한 날에는 건간 콘솔 로그가 축적되어 갑니다.)

여러가지 조사하고 있으면 해결책같은 것이…
SVG tries to render before RiotJS replaces variables
명확한 원인까지는 적혀 있지 않았습니다만, x1, x2, y1, y2의 속성명에 각각 {} 를 붙여 주면 좋을 것 같습니다.

-  <line each={l in lines} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} stroke={l.color}/>
+  <line each={l in lines} riot-x1={l.x1} riot-y1={l.y1} riot-x2={l.x2} riot-y2={l.y2} stroke={l.color}/>

덧붙여서 riot- 이외이면, <line> 의 x, y에서도 발생했습니다.

하, 깔끔했다. . .
그러나 Riot.js에서 SVG를 다룰 수있는 것은 고맙습니다. 그림이나 그래프도 바삭바삭 그릴 것 같습니다.