Question

这是我与SVG相关的HML：

     <div style="width:24px;height:24px;margin:0px;padding:0px;background:black;">
        <svg   viewBox="0 0 24 24">
          <path fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
        </svg>
     </div>

呈现效果很好，但在div内的箭头上方和下方保留填充。

在base64编码SVG标签之后，我尝试使用SVG作为div的背景，例如：

    <div style="width:24px; height:24px;margin:0px;padding:0px;background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZWQiIHRyYW5zZm9ybT0ic2NhbGUoMSwxKSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOXY3aC0xNXY0aDE1djd6Ii8+PC9zdmc+');">
     </div>

什么也没显示！

是的，也有类似的问题，但这不是重复的。关于类似问题的答案中的任何内容都无法解决该问题。

Answer 1

我不太确定我是否理解您的问题。也许这就是您需要的：

我已将viewBox更改为viewBox="0 3 24 18"。为了获得此值，我使用了console.log（thePath.getBBox（））

方法getBBox()返回具有路径边界框位置和大小的对象。我将此值用于新的viewBox

viewBox = bb.x bb.y bb.width bb.height

其中bb是边界框。

<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
        <svg viewBox="0 3 24 18">
          <path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
        </svg>
     </div>

Answer 2

填充必须位于path而不是svg元素上。

此外，尝试将width="24"和height="24"添加到svg元素。

在div中填充简单的SVG

2 个答案: