Question

此SVG图标为640x640像素。工具栏高48px。现在，图标应自动调整为工具栏的高度。因此，蓝色区域必须是48x48px。

但是，图标现在占用的空间比它需要的多得多。

我给了svg 48px的高度。更好的是height: 100%，但这不起作用。

my codepen

Answer 1

从svg元素中删除width属性。之后您可能需要调整工具栏中的flex-grow属性。

见live on CodePen。

在Chrome浏览器63.0.3239.132上测试

Answer 2

仅将高度更改为48px会使宽度保持在640px。因为您在width="640px"上指定了<SVG>。

因此，修复只是从width删除height和<svg>属性。

＆＃13;

body {
  margin: 5%;
}

.toolbar {
  position: realive;
  color: #fff;
  display: flex;
  align-items:center;
  justify-content: space-between;
  background: red;
  height: 48px;
}

.toolbar__section.flex-grow {
  flex-grow: 1;
}
  
.toolbar__section.bg-green {
  background: green;
}

svg {
  display: flex;
  height: 48px;
  background: blue; 
}

＆＃13;

<p><strong>Responsive inline svg?</strong></p>
<p>
 This SVG icon is 640x640px. The toolbar is 48px high.
The icon should now automatically adjust to the height of the toolbar.
Accordingly, the blue area would have to be 48x48px.

However, the icon now occupies much more space than it needs.

I gave the svg a height of 48px. Better would be "height: 100%" but that does not work.
</p>

  
<div class="toolbar">
  <div class="toolbar__section bg-green flex-grow">
    Logo 
  </div>
  <div class="toolbar__section">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" preserveAspectRatio="xMinYMin meet">
<title></title>
<g id="icomoon-ignore">
</g>
<path fill="#000" d="M603.794 613.188l-190.189-207.478c42.858-44.846 66.395-103.468 66.395-165.71 0-64.106-24.964-124.375-70.294-169.706s-105.6-70.294-169.706-70.294-124.375 24.964-169.706 70.294-70.294 105.6-70.294 169.706 24.964 124.376 70.294 169.706 105.6 70.294 169.706 70.294c55.226 0 107.595-18.542 150.027-52.655l190.178 207.467c3.156 3.442 7.471 5.188 11.799 5.188 3.862 0 7.736-1.391 10.808-4.205 6.513-5.972 6.954-16.093 0.982-22.607zM32 240c0-114.691 93.309-208 208-208s208 93.309 208 208-93.309 208-208 208-208-93.309-208-208z"></path>
</svg>

  </div>
  <div class="toolbar__section bg-green">
    Login Icon 
   </div>
</div>

＆＃13;

响应内联svg？

2 个答案: