<svg> unlimited vertical scrolling is here

[dragonBTV]

Ok, I finally work it out the unlimited vertical scroll and share it with everyone who need it.

There are three things to pay attention to:
1. set the height of #scrollview-item instead of #scrollview and make it to cover the heights of all your stuff
2. you MUST add another #scrollview-item after it in order to make your first #scrollview-item scrollable
3. the height of the last #scrollview-item control the height of final empty space

Here comes the code and hope it helps.

``<svg>
<use href="#scrollview">
<use href="#scrollview-item" height="600">
<text id="test" x="10" y="50">this is line 1</text>
<text id="test" x="10" y="100">this is line 2</text>
<text id="test" x="10" y="150">this is line 3</text>
<text id="test" x="10" y="200">this is line 4</text>
<text id="test" x="10" y="250">this is line 5</text>
<text id="test" x="10" y="300">this is line 6</text>
<text id="test" x="10" y="350">this is line 7</text>
<text id="test" x="10" y="400">this is line 8</text>
<text id="test" x="10" y="450">this is line 9</text>
<text id="test" x="10" y="500">this is line 10</text>
<text id="test" x="10" y="550">this is line 11</text>
<text id="test" x="10" y="600">this is line 12</text>
</use>

<use href="#scrollview-item" height="50"></use>
</use>
</svg>``

[dragonBTV · Accepted solution]

[JonFitbit]

Rather than set the X/Y for each element, you could probably add a class name:

.item {
  width: 100%-20;
  height: 50;
  x: 10;
  y: $
}

$ should offset vertically from the previous element automatically.

[dragonBTV]

Great! thank you!

confirmed with this code:

<text id="test">this is line 1</text>
<text id="test">this is line 2</text>
<text id="test">this is line 3</text>

#test {
fill: red;
font-size: 30;
font-family: Tungsten-Medium;
text-anchor: start;
text-length: 24;
width: 100%-20;
height: 50;
x: 10;
y: $
}

the only sacrifice is line 1, cause at that time y = 0