时间戳

首页 > 解决方案 > 从包含图像的 svg 中删除多余的“尾巴”

html - 从包含图像的 svg 中删除多余的“尾巴”

问题描述

我有一个 png 徽标，我将其封闭在一个圆形 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>

显示徽标的图像：

在此处输入图像描述

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

真诚的，一个菜鸟。

标签： htmlcsssvg

解决方案

我对你的 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>

推荐阅读