html - 从包含图像的 svg 中删除多余的 "tail"

Question

我有一个 png Logo ，我将其括在一个圆形 svg 中。 当使图像足够大时，我发现有很多多余的空白。

我是 svg 的新手，并尝试以我能找到的所有方式调整它的大小，但这最终会降低图像质量或大小。我尝试将 svg 放入 div 容器中并调整 div 大小，但没有成功。所附图片尺寸为 940 x 940 像素。

<div class="container" style="height:10%;width:100%; display:block;">
    <svg id="graph" class="text-center" width="100%" height="3500px" display="block">

        <defs>
            <pattern id="image" x="0%" y="0%" height="100%" width="100%"
                     viewBox="0 0 350 420">
                <a href="index.html">
                    <image x="0%" y="0%" width="512" height="512" xlink:href="img/CheesyTools2.png"></image>
                </a>
            </pattern>
        </defs>

        <circle id="sd" class="medium" cx="50%" cy="5%" r="5%" fill="url(#image)" stroke="black" stroke-width="0.5%" />
        <text text-anchor="middle" x="50%" y="11%" style="color:#274666; font-size:40px;">CheesyTools</text>
        <text text-anchor="middle" x="50%" y="12%" style="color:#274666; font-size:20px;">The world's leading website in being useless.</text>

    </svg>
</div>

显示 Logo 的图像:

我知道多余的空白来自 3500 像素的高度，但这是我可以使 Logo 尺寸适合网站的唯一方法。 我希望它具有相同的尺寸，但没有多余的高度。

真诚的，菜鸟。

Answer 1

我对您的 SVG 进行了相当多的更改。我使用的是 viewBox 属性，而不是 SVG 的宽度和高度。 SVG 并不像以前那么大，它只是图像和文本所需的大小。现在可以更轻松地使用 SVG 并将其放置在页面中您需要的任何位置。我希望它有帮助。

svg {
  border: 1px solid;
  width: 365px;
  height: 380px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<svg id="graph" class="text-center" viewBox="245 45 365 380" display="block">

        <defs>
            <pattern id="image" x="0" y="0" height="100%" width="100%">
                <a href="index.html">
                    <image width="260" height="260" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg"></image>
                </a>
            </pattern>
        </defs>
 
        <circle id="sd" class="medium" cx="430.75" cy="175.075" r="127.5" fill="url(#image)" stroke="black" stroke-width="5" />
        <text text-anchor="middle" x="430.75" y="370" style="color:#274666; font-size:40px;">CheesyTools</text>
        <text text-anchor="middle" x="430.75" y="400" style="color:#274666; font-size:20px;">The world's leading website in being useless.</text>
  
    </svg>