将svg缩放到特定的宽度和高度

Question

我正在尝试向.svg显示26*28文件，但它会向26*28显示div，但不会将图标缩放到特定大小。我尝试使用preseverveaspectratio = none，viewbox和width / height属性，但这并没有解决我的问题。

.svg代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" ><defs><style>.a{fill:#aeddd6;}.b{fill:none;stroke:#0d0d0d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;}.c{fill:#0d0d0d;}</style></defs><title>calendar</title><path class="a" d="M12.2 13.5V31H73.4V13.5H62.4s0.9 10.2-5 9.4c0 0-5.8-5.6-9.8H33.2v5.9s-1.4 4.2-5 3.9c0 0-6.2 1.2-5-9.8Z" transform="translate(-10.90282 -4.52324)"/><polyline class="b" points="51.5 8.6 62.5 8.6 62.5 67.9 1.3 67.9 1.3 8.6 12.2 8.6"/><line class="b" x1="22.3" y1="8.6" x2="41.4" y2="8.6"/><line class="b" x1="1.3" y1="26.4" x2="62.5" y2="26.4"/><circle class="c" cx="14.8" cy="40.6" r="3.1"/><circle class="c" cx="25.9" cy="40.6" r="3.1"/><circle class="c" cx="37" cy="40.6" r="3.1"/><circle class="c" cx="48.2" cy="40.6" r="3.1"/><circle class="c" cx="14.8" cy="53.1" r="3.1"/><circle class="c" cx="25.9" cy="53.1" r="3.1"/><circle class="c" cx="37" cy="53.1" r="3.1"/><circle class="c" cx="48.2" cy="53.1" r="3.1"/><rect class="b" x="12.6" y="1.3" width="9" height="16.8" rx="3.2" ry="3.2"/><rect class="b" x="42" y="1.3" width="9" height="16.8" rx="3.2" ry="3.2"/></svg>

SCSS

.calendar-icon{
  background-image: image-url('calendar.svg');
  width: 26px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
}

超薄

.calendar-icon

Answer 1

您的viewBox太大，导致视口底部和右侧有很多空间。

viewBox="0 0 70 70"

非常接近，但您可能需要进一步尝试。

Answer 2

这可能是一个快速修复，虽然您可以将svg保存在26px 28px的大小或尝试

.calendar-icon{
  background-image: image-url('calendar.svg');
  width: 26px !important;
  height: 28px !important;
  background-repeat: no-repeat;
  background-size: contain;
}