在DIV中嵌入SVG而不填充

我们需要在特定的div中封装特定的SVG，而不需要任何填充和边距

请检查这个代码

div{
调整大小：两者；
轮廓：1px纯红；
边缘底部：3em；
填充：1em；
}
svg，
img{
显示：块；
轮廓：1px纯蓝色；
最大宽度：100%；
高度：自动；
}

嵌入式SVG：
使用Raphaël 2.2.0创建

您已经在div上设置了填充和边距？尝试：

div {
    resize: both;
    outline: 1px solid red;
    display: inline-block;
}

svg,
img {
    display: block;
    outline: 1px solid blue;
    max-width: 100%;
    height: auto;
}

---

它通过设置viewBox=“6 45 209 205”对我有效

---

有没有办法通过给定任何SVG动态占用DIV？

如果您谈论的是SVG中的额外空间，那么您需要修复SVG视图框。阅读viewBox的工作原理。它的值需要对应于SVG中路径的边界维度。目前，您似乎有一个任意的“0 100 100”视图框

如果实际测量，SVG中所有路径的边界为：

x:      0
y:      44.61
width:  1000
height: 64.36

因此，您的viewBox需要

viewBox="0 44.61 1000 64.36"

如果你把它插进去，你就得到了全文。但是，它很小，位于您为SVG指定的300 x 300像素框的中心

宽度

和

高度

要解决这个问题，只需删除

height

属性。SVG将被缩放以适应300px的宽度，SVG的高度将由浏览器自动计算（使用viewBox暗示的纵横比）

div{
调整大小：两者；
轮廓：1px纯红；
边缘底部：3em；
填充：1em；
}
svg，
img{
显示：块；
轮廓：1px纯蓝色；
最大宽度：100%；
高度：自动；
}

嵌入式SVG：
使用Raphaël 2.2.0创建

我尝试删除所有div CSS，但仍然不起作用，我在这里发布之前尝试了所有可能的场景：（立即尝试。我添加了display:inline block；刚刚删除了边距和填充。我尝试了这个，但仍然不起作用，请您尝试一下。SVG单词是“TECHNOLOGY”但是没有完全占用DIV。这是我们在这里面临的主要问题。哦，我认为这是关于填充和边距%]尝试将svg上的宽度和高度设置为100%？对我来说是有效的，如果删除DIV填充等。如果它仍然不起作用，我将澄清您希望看到的内容，以及缺少的内容。您希望看到多少来的横杆等等，右边应该有一个缺口。这是为我填补的，但我怀疑这可能不是你的意思。我期待任何文本，比如“IIIIII”SVG内部应该适合给定的div。我怀疑您混淆了这个问题，它与div没有任何关系，而是一个单独的问题。如果您看一下它是否有效？没有div就是这样。