CODEWITHSUNDEEP
javascripthtmlcsssvg
George Harrington
George Harrington

Reputation: 49

SVG text line height displays differently within img tag

I have created an SVG image which I am using within our website.

The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag.

<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />

I am just trying to reduce the line height within the following SVG:

https://jsfiddle.net/fahc2vvq/

I have to load in the XML version to edit the SVG within the website, Any ideas?

Upvotes: 2

Views: 1227

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

If you want a <foreignObject> to function correctly, you need to include a <body> element.

Note: I've removed the image from this demo to make it smaller.

<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />


<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="73mm"
   height="150mm"
   viewBox="0 0 73 150"
   version="1.1"
   id="svg4523">
  <g
     id="layer1"
     transform="translate(0,-147)">

      <foreignObject
       x="15"
       y="150"
       width="40"
       height="60">
       <body>
         <p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p>
       </body>
    </foreignObject>
  </g>
</svg>

Upvotes: 1

Related Questions