为什么我的 svg 周围有透明区域？答案

【问题标题】：Why is there transparent area around my svg?为什么我的 svg 周围有透明区域？
【发布时间】：2021-06-21 21:29:07
【问题描述】：

我在我的网站上制作了一个 svg 图片。当我使用它时，它看起来像这样：

它周围有很多透明区域，我会说它可以扩展。
svg 图像本身似乎没有任何透明区域。
当我使用 png 时，它可以正常工作，只需使用 svg 就可以创建这个空白区域。
我只是给图像一个红色背景，以查看图像的实际位置。

这是我的 CSS：

#logo {
    position: absolute;
    left: 0;
    top: 0;
    background-color: red;
    width: 200px;
    height: 50px;
}

#logo 指向我的 html 中的 <img>：

<img src="Sources/FruityJuice Logo.svg" alt="FruityJuiceLogo" id="logo">

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
这可能是SVG文件实际上有那个大小并且背景是“透明”的，你可以尝试在照片编辑器中打开它，看看是否出现了方格背景，如果是的话，你可以只需裁剪它即可解决您的问题。
FruityJuice Logo.svg的标记是什么
Dirk, we hebben de inhoud van Logo.svg nodig.

【解决方案1】：

在 Adobe Illustrator 中，我将文件裁剪为 Yong Pin 所说的徽标，这似乎已修复。

【讨论】：