如何保留 SVG 符号的宽高比？

Question

我需要多次重复使用某些 SVG 图标，为了避免重复，我将它们放在

<defs>

标签中，并稍后使用

<use>

重复使用它们。但是，我想通过仅定义高度来调整图标大小，我希望宽度能够自动适应，但它不起作用，我无法找到任何解决方案。有什么办法可以使宽度动态化吗？

svg {
  display: block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}

<svg style="display: none" >
  <defs>
    <symbol id="icon" viewBox="0 0 384 512">
      <path fill="currentColor" stroke="none" d="m384 192c0 87.4-117 243-168.3 307.2-12.3 15.3-35.1 15.3-47.4 0-52.2-64.2-168.3-219.8-168.3-307.2 0-106.04 85.96-192 192-192 106 0 192 85.96 192 192z"/>
    </symbol>
  </defs>
</svg>

<!-- Doesn't work, the width is arbitrarily set to 300px. -->
<svg height="1rem">
  <use href="#icon" />
</svg>

Answer 1

不幸的是，父 svg 无法自动获取

<symbol>

viewBox 值。

所以你需要：

• 将符号的 viewBox 属性复制到您的

  <use>

  父 svg
• 通过javaScript计算viewBox（查询引用的符号实例）
• 创建纵横比 CSS 类（按照 @Dave Pritlove 的建议）

示例 1：复制 viewBox 属性（精确、缩放和舍入）

svg {
  display: block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}

<svg style="display: none" >
    <symbol id="icon" viewBox="0 0 384 512">
      <path fill="currentColor" stroke="none" d="m384 192c0 87.4-117 243-168.3 307.2-12.3 15.3-35.1 15.3-47.4 0-52.2-64.2-168.3-219.8-168.3-307.2 0-106.04 85.96-192 192-192 106 0 192 85.96 192 192z"/>
    </symbol>
</svg>

<p>Original viewBox values</p>
<svg height="1rem" viewBox="0 0 384 512">
  <use href="#icon" />
</svg>

<p>Upscaled viewBox values</p>
<svg height="1rem" viewBox="0 0 768 1024">
  <use href="#icon" />
</svg>

<p>Scaled down viewBox values</p>
<svg height="1rem" viewBox="0 0 3.84 5.12">
  <use href="#icon" />
</svg>

<p>Rounded</p>
<svg height="1rem" viewBox="0 0 4 5">
  <use href="#icon" />
</svg>

值得一提的是：您不一定需要完全相同的值。缩放值会很好地发挥作用。舍入值也可能满足您的需求 - 即使它们实际上改变了精确的纵横比。

示例 2：从引用中检索 viewBox 属性

<symbol>

（仅适用于 HTML 正文中内联的 svgs）

let use = document.querySelectorAll('use')

use.forEach(function(el){
  let id = el.getAttribute('href');
  let symbol = document.querySelector(id);
  let viewBox = symbol.getAttribute('viewBox');
  el.closest('svg').setAttribute('viewBox', viewBox );
})

svg {
  display: inline-block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}

<svg style="display: none" >
    <symbol id="icon" viewBox="0 0 384 512">
      <path fill="currentColor" stroke="none" d="m384 192c0 87.4-117 243-168.3 307.2-12.3 15.3-35.1 15.3-47.4 0-52.2-64.2-168.3-219.8-168.3-307.2 0-106.04 85.96-192 192-192 106 0 192 85.96 192 192z"/>
    </symbol>
<symbol id="address-card" viewBox="0 0 576 512">
    <path fill="currentColor" d="M208 256c35.35 0 64-28.65 64-64c0-35.35-28.65-64-64-64s-64 28.65-64 64C144 227.3 172.7 256 208 256zM464 232h-96c-13.25 0-24 10.75-24 24s10.75 24 24 24h96c13.25 0 24-10.75 24-24S477.3 232 464 232zM240 288h-64C131.8 288 96 323.8 96 368C96 376.8 103.2 384 112 384h192c8.836 0 16-7.164 16-16C320 323.8 284.2 288 240 288zM464 152h-96c-13.25 0-24 10.75-24 24s10.75 24 24 24h96c13.25 0 24-10.75 24-24S477.3 152 464 152zM512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96C576 60.65 547.3 32 512 32zM528 416c0 8.822-7.178 16-16 16H64c-8.822 0-16-7.178-16-16V96c0-8.822 7.178-16 16-16h448c8.822 0 16 7.178 16 16V416z"></path>
  </symbol>
  
</svg>

<p>Original viewBox values</p>
<svg height="1rem" viewBox="0 0 384 512">
  <use href="#icon" />
</svg>
<svg height="1rem" viewBox="0 0 576 512">
  <use href="#address-card" />
</svg>


<p>Js generated viewBox values</p>
<svg height="1rem">
  <use href="#icon" />
</svg>

<svg height="1rem">
  <use href="#address-card" />
</svg>

顺便说一句：

<symbol>

元素不需要嵌套在

<defs>

中，因为默认情况下它们是不可见的。

Answer 2

CSS

aspect-ratio

允许您在仅指定高度或宽度时实现一致的比例。在您的情况下，

aspect-ratio

可以设置（在样式表中）为 svg

viewbox

比率：384/512;

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

工作片段：

svg {
  display: block;
  aspect-ratio: 384/512;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}

<svg style="display: none" >
  <defs>
    <symbol id="icon" viewBox="0 0 384 512">
      <path fill="currentColor" stroke="none" d="m384 192c0 87.4-117 243-168.3 307.2-12.3 15.3-35.1 15.3-47.4 0-52.2-64.2-168.3-219.8-168.3-307.2 0-106.04 85.96-192 192-192 106 0 192 85.96 192 192z"/>
    </symbol>
  </defs>
</svg>

<!-- Doesn't work, the width is arbitrarily set to 300px. -->
<svg height="1rem">
  <use href="#icon" />
</svg>