为什么右下边框不显示在具有SVG背景的div中

Question

有人能解释一下为什么div和img元素上只显示顶部和左侧边框吗？

https://codepen.io/jpe44/pen/rNvbOdB

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' style='border: 3px dashed coral;'%3E%3Ccircle cx='100' cy='100' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' /%3E%3C/svg%3E">

Answer 1

如果将其转换为"真实的"；svg似乎奏效了。边界就在那里。发生的情况是，您的svg图像不能被设置为box-sizing:border-box，因此图像的实际大小是210+3px*2=216px。如何补救？我不知道。但是您始终可以对img标记本身进行样式设置。

img,
svg {
display: block;
}

original:
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' style='border: 3px dashed red;'%3E%3Ccircle cx='100' cy='100' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' /%3E%3C/svg%3E">svg:
<svg xmlns='http://www.w3.org/2000/svg' width='210' height='210' style='border: 3px dashed coral; '><circle cx='100' cy='100' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' /></svg> img has border:
<img style='border: 3px dashed red;' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' %3E%3Ccircle cx='100' cy='100' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' /%3E%3C/svg%3E">