Question

如何控制.svg周围的位置和空间。现在，当页面呈现时，我将所有这些空间都放在.svg的右侧和底部？我的标记和样式看起来像这样：

<style>
  .fill-extra { fill: #686868; } 
</style>

在<body>我有：

<svg class="fill-extra" width="150" height="150" viewBox="0 0 100 100">
   <use xlink:href="svg_icons/extra_closed.svg#Layer_1"></use>
</svg>

svg看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     enable-background="new 0 0 49.68 49.68" xml:space="preserve">
<path d="M48.998,24.754c0,13.408-10.87,24.279-24.279,24.279c-13.41,0-24.279-10.871-24.279-24.279
    c0-13.409,10.87-24.279,24.279-24.279C38.128,0.475,48.998,11.345,48.998,24.754z M24.715,38.347h13.527l4.445-17.837l-1.871-3.976
    h-1.641l-0.467,2.572H24.715h-13.99l-0.466-2.572H8.62l-1.871,3.976l4.445,17.837H24.715z M24.717,28.697h4.93l1.666-1.053V23.96
    h-1.754v2.456h-4.842H19.88V23.96h-1.755v3.685l1.667,1.053H24.717z M24.717,17.074h12.209v-3.07H24.717H12.51v3.07H24.717z
     M24.717,11.942h7.999V9.837h-7.999h-7.996v2.105H24.717z"/>
</svg>

Answer 1

您的viewBox从0,0到100,100，但路径的边界大致为0到50,50。

你可以让viewBox更小，例如viewBox =“0 0 50 50”这将使图形保持相同的大小，但使内容看起来更大。或者你也可以使宽度和高度更小，这与调整viewBox尺寸相结合可以使绘图保持相同的大小，同时也摆脱围绕它的空白空间。

如何控制外部svg周围的间距

1 个答案: