I have an inline SVG object, and some lines in it. I am trying to paint half of the line solid and the other half dashed.
<svg height="30" width="300">
<g fill="none" stroke="black" stroke-width="4">
<line stroke-dasharray="50%,1%,1%,1%" x1="10" x2="280" y1="10" y2="10" />
</g>
</svg>The simplest would be to use 2 line objects. One to make the solid line and another for the dashed line. Here is an example :
<svg height="30" width="300">
<g fill="none" stroke="black" stroke-width="4">
<line x1="10" x2="150" y1="10" y2="10" />
<line stroke-dasharray="5,5" x1="150" x2="280" y1="10" y2="10" />
</g>
</svg>The stroke-dasharray property will repeat itself indefinitely so if the "pattern" you enter doesn't last until the end of the line, it will use the first value again and repeat the pattern.
You can see that in your example the long dash (50% value) repeats itself 3 times with 3 small dashes (1% values) in between (2 empty and one solid).
Put a pathLength="100" on the line so the total length is calculated as 100 units
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength
set the stroke-dasharray units to the pattern you want:
<svg>
<line pathLength="100" stroke-dasharray="50,2,5,2,5,2,5,2,5,2,5,2,5"
stroke="black" stroke-width="4"
x1="10" x2="280" y1="10" y2="10" />
</svg>