1
<text x="216.7265625" y="191.21875" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: Arial; cursor: move; width: 10px;" font-size="12px"><tspan dy="4" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">F. Downturn in numbers of different graphic novels being produced.</tspan></text>

I am trying to break the link into two lines. I had tried
, \n, white-space: normal and none of them are working. Need advice.

1

2 Answers 2

1

You need to make it a block level element. The code below will work:

<text x="216.7265625" y="191.21875" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style="display: inline-block;width: -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: Arial; cursor: move; width: 10px;" font-size="12px"><tspan dy="4" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">F. Downturn in numbers of different graphic novels being produced.</tspan></text>
5
  • 1
    That breaks on every word
    – mplungjan
    Commented Jun 15, 2016 at 5:48
  • That's because he has provided width 10px to the element. Width can be adjusted as per the requirement. Commented Jun 15, 2016 at 5:49
  • So you would need to fix that too?
    – mplungjan
    Commented Jun 15, 2016 at 5:50
  • That he needs to decide, how much space he can add the the element. Correct me If I am wrong please. mplungjan Commented Jun 15, 2016 at 5:52
  • stackoverflow.com/questions/16701522/…
    – mplungjan
    Commented Jun 15, 2016 at 5:57
1

tutorials jenkov.com svg tspan-element

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text y="20">
        <tspan x="10">tspan line 1</tspan>
        <tspan x="10" dy="15">tspan line 2</tspan>
        <tspan x="10" dy="15">tspan line 3</tspan>
    </text>
</svg>

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.