<svg>比<use>大

Question

我需要通过<use>标记从sprite导入svg，这样svg和use的大小是相同的(use和父svg标记一样大)。

<svg>
   <use xlink:href="#facebook-hover"></use>
</svg>

我不知道到底是什么造成了这种大小的差异，也不知道如何解决这个问题。

​

​

这是我的演示，给那些想帮我的人：

​

svg {
  width: 200px;
  height: 200px;
  position: relative;
}

use {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<svg width="0" height="0" class="hidden">
  <symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
    <title>ThirdParty/Facebook/2xpng1. Liquorice</title>
    <defs>
      <polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
    </defs>
    <g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group-3" transform="translate(2.000000, 2.000000)">
        <g id="Clip-2"></g>
        <path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
      </g>
    </g>
  </symbol>
</svg>

<svg>
  <use xlink:href="#facebook-hover"></use>
</svg>

​

Answer 1

正如我所评论的:第二个svg使用一个viewBox。试试<svg viewBox="0 0 40 40"><use ...

另外:在css中，您将两个evg元素强制为200 to /200 to大小。您可以添加width="200“代替。

另外:使用的css roules是没有意义的。

另外:在符号中的无用<defs>中放置一个无用的多边形。你可以删除防御系统。

更多信息:路径被包装在许多组中。还有一群人也是空的。这条路被一个不存在的掩码掩蔽-2。

我已经删除了无用的组和掩码属性。请看一看：

​

<svg width="0" height="0" class="hidden">
  <symbol id="facebook-hover">
    <title>ThirdParty/Facebook/2xpng1. Liquorice</title>
        <path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88"></path>
  </symbol>
</svg>

<svg viewBox="0 0 40 40" width="200">
  <use xlink:href="#facebook-hover"></use>
</svg>

​