Question

我创建了一个我在网站上使用的SVG图像。

通过将XML插入HTML文件来显示SVG，但是，当这样加载时，与在img标记中显示相比，SVG的显示方式不同。

 x1  y1  z1
 x2  y2  z2
 x3  y3  z3

我只想减少以下SVG中的行高：

https://jsfiddle.net/fahc2vvq/

我必须加载XML版本来编辑网站内的SVG，有什么想法吗？

Answer 1

如果您希望<foreignObject>正常运行，则需要添加<body>元素。

注意：我已从此演示中删除了图像以使其缩小。

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

SVG文本行高度在img标记中显示不同

1 个答案: