Question

我有一只眼睛，并将它用作图标。

这个svg里面有一个<switch>元素，里面包含了所有的路径绘图内容。当您在javascript控制台中检查此<switch>元素时，它会将其尺寸显示为700px X 500px。然而，包含它的SVG是707px X 707px。

即。 SVG顶部有一大堆空白区域。

我想知道如何使SVG与其中包含的元素大小相同。我需要这样做，因为我想在图像中添加一个引导工具提示，但是工具提示在图像上面放得太高了，因为它填充了所有这些空白区域！

我是这个SVG的新手 - 我尝试在SVG上更改视口的大小，但这只是从图像中删除了底部，并在顶部留下了空白区域。

以下是SVG图像的代码：

<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <switch>
    <foreignobject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
    <g i:extraneous="self">
      <g>
        <path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878     c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146     c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256     l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195     L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747     c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699     c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608     c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94     c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941     c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524     c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01     c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523     c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
        <path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825     C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063     c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
      </g>
    </g>
  </switch>
</svg>

我已将它包含在PLNKR中，以便您可以看到正在发生的事情： http://plnkr.co/edit/gw1k0vQGon3dxUOVvuDB

以下是图片的当前外观，为了清晰起见，使用了新的颜色：

以下是我希望图像的外观（再次 - 忽略痘痘颜色......）：

我想从顶部和底部去除所有空白区域。

有什么想法吗？

Answer 1

像这样？我添加了一个rect背景，因此很容易看到SVG的范围。我所做的就是修改viewBox，使值与形状范围相匹配。

      <svg viewBox="0 14 100 73" width="100" height="71" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" enable-background="new 0 0 100 100" xml:space="preserve" overflow="hidden">
        <rect width="100" height="100" fill="lightblue"/>
        <switch>
          <foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
          <g i:extraneous="self">
            <g>
              <path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878     c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146     c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256     l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195     L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747     c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699     c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608     c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94     c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941     c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524     c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01     c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523     c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
              <path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825     C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063     c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
            </g>
          </g>
        </switch>
      </svg>

如何使SVG与其内部<switch>元素的大小相同？

1 个答案: