我需要通过<use>个标签从sprite导入svg,所以svguse的大小相同(use与父svg标签一样大).

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

我不知道到底是什么导致了这种尺寸差异,我该如何解决它.

enter image description here

这是我的演示,面向那些想帮助我的人:

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>

推荐答案

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

另外:在css中,您强制两个evg元素的大小都为200px/200px.您可以添加width="200".

此外:使用css轮盘毫无意义.

此外:您正在将一个无用多边形放入符号内的无用<defs>中.您可以删除DEF.

更多:路径被包装在许多组中.还有一个空组.路径被不存在的掩码2屏蔽.

我已经删除了无用的组和掩码属性.请看一下:

svg:nth-of-type(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>

Html相关问答推荐

z—index总是 destruct 我的头,我该如何修复它?

如何正确使用counter()、counter—increment()和counter—reset()嵌套标题?

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表?

为什么在添加文本时网格区域会调整大小?

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素?

如何创建带有粘性列和标题的网格?

仅向上扩展并以最大高度滚动的Div

Django中的图像未从静态显示

不呈现孙子元素,使用R htmlTools::Taglist为分页的pdf生成HTML

我无法动态嵌入Instagram帖子,因为无法分配Instagram固定链接

carousel 的垂直滚动按钮居中

如何使活动选项卡背景作为父背景图像

视频重新加载而不是在 Swift 中暂停 WKWebView

如何配置 prettier 使其以 Vue.js 模板语法的特定方式运行?