CODEWITHSUNDEEP
htmlcss
learnallskill
learnallskill

Reputation: 125

Cant break the text in the Text tag

<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.

Upvotes: 1

Views: 84

Answers (2)

Saika
Saika

Reputation: 396

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>

Upvotes: 1

Karan Batra
Karan Batra

Reputation: 106

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>

Upvotes: 1

Related Questions