在div中填充简单的SVG [英] Filling a simple SVG in a div

问题描述

这是我与SVG相关的HML:

Here is my relevant HML with SVG:

     <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内的箭头上方和下方保留填充.

It renders fine but leaves padding above and below the arrow inside the div.

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

I tried using SVG as background to the div after base64 encoding the SVG tag, as in:

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

它什么也不显示！

是的，也有类似的问题，但这不是重复的. SO上类似问题的答案中的任何内容都无法解决此问题.

Yes there are similar questions asked but this is NOT a duplicate. Nothing in the answers posted to similar questions on SO resolve this problem.

推荐答案

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

I'm not very sure I understand your question. Maybe this is what you need:

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

I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())

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

The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new 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>

这篇关于在div中填充简单的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！