Question

我收到一个包含以下内容的SVG文件（黑色加号图标）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1460px" height="610px" viewBox="0 0 1460 610" enable-background="new 0 0 1460 610" xml:space="preserve">
<g>
    <path d="M746.602,304h-16v-16H729v16h-16v1.602h16v16h1.602v-16h16V304z M746.602,304"/>
</g>
</svg>

我想在带有以下标记的页面中显示它：

<img src="plus-icon-black.svg">

然而加号显示的位置远离img标签。

如何显示img标签所在的svg图像？

谢谢！

Answer 1

您的SVG图像在+形状周围保存了大量空白。

这是一个干净的版本：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="449.1 991.8 33.6 33.6">
  <path d="M482.7 1007.8h-16v-16h-1.6v16h-16v1.6h16v16h1.6v-16h16v-1.6z"/>
</svg>

您可以使用CSS或使用<img> width或height属性来控制尺寸。在Illustrator中导出到SVG时，请将画板大小减小到形状的边界框。

如何在img标签所在的位置显示此SVG图像

1 个答案: