blocks|key|2268897|text|CSS+aspect-ratio允许您在指定高度或宽度时达到一致的比率。在您的示例中，可以将aspect-ratio设置为svg+viewbox比率:+384/512；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2268898|请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio|2268899|工作片段：|2268900|​|2268901|svg+{
++display:+block;
++aspect-ratio:+384/512;
++margin:+1rem;
++padding:+1rem;
++background:+rebeccapurple;
++color:+white;
}|code-block|syntax|javascript|2268902|<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>


<svg+height="1rem">
++<use+href="#icon"+/>
</svg>|2268903|2268904|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio^0|4|C|1A|C|1T|7|0|3|1P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1D|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1F|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|1G|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>CSS <code>aspect-ratio</code> allows you to achieve a consistent ratio when specifying only height or width. In your case, the <code>aspect-ratio</code> can be set (in the stylesheet) to the svg <code>viewbox</code> ratio:  384/512;</p>
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio</a></p>
<p>Working snippet:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
  display: block;
  aspect-ratio: 384/512;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="display: none" &gt;
  &lt;defs&gt;
    &lt;symbol id="icon" viewBox="0 0 384 512"&gt;
      &lt;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"/&gt;
    &lt;/symbol&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;!-- Doesn't work, the width is arbitrarily set to 300px. --&gt;
&lt;svg height="1rem"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1733101|text|不幸的是，父svg无法自动获得<symbol>+viewBox值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1733102|所以你要么需要：|1733103|instance)|1733104|create+|unordered-list-item|1733105|
|1733106|将符号的viewBox属性复制到<use>父级svg|1733107|1733108|，通过javaScript计算viewBox+(查询引用的符号纵横比css类(如@Dave+Pritlove)建议的)|1733109|1733110|示例1:复制的viewBox属性(精确、缩放和舍入)|1733111|​|1733112|svg+{
++display:+block;
++margin:+1rem;
++padding:+1rem;
++background:+rebeccapurple;
++color:+white;
}|code-block|syntax|javascript|1733113|<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>|1733114|1733115|值得一提的是:您不一定需要完全相同的值。缩放的值会很好地工作。四舍五入的值也可以满足你的需要--尽管它们实际上改变了精确的纵横比。|1733116|1733117|示例2:从引用的viewBox检索到的<symbol>属性|1733118|(只适用于HTML正文中内联的svgs+)|1733119|1733120|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+);
})|1733121|svg+{
++display:+inline-block;
++margin:+1rem;
++padding:+1rem;
++background:+rebeccapurple;
++color:+white;
}|1733122|<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>|1733123|1733124|<symbol>元素不需要嵌套在<defs>中，因为它们在默认情况下是不可见的。|1733125|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/72834684/how-to-preserve-aspect-ratio-of-a-svg-symbol/72835113#72835113^0|F|8|0|0|0|0|0|G|5|0|0|14|E|0|0|0|0|0|0|0|0|0|0|J|8|0|0|0|0|0|0|0|0|8|G|6|0^^$0|@$1|2|3|4|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|20|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|21|8|@]|D|@]|E|$]]|$1|O|3|P|5|L|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|Q|3|N|5|6|7|25|8|@]|D|@]|E|$]]|$1|R|3|S|5|L|7|26|8|@]|D|@$9|27|A|28|1|29]]|E|$]]|$1|T|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|2B|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|2C|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|2D|8|@]|D|@]|E|$11|12]]|$1|13|3|14|5|10|7|2E|8|@]|D|@]|E|$11|12]]|$1|15|3|X|5|6|7|2F|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|2G|8|@]|D|@]|E|$]]|$1|18|3|X|5|6|7|2H|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|2I|8|@$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|2L|8|@]|D|@]|E|$]]|$1|1D|3|X|5|6|7|2M|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|10|7|2N|8|@]|D|@]|E|$11|12]]|$1|1G|3|1H|5|10|7|2O|8|@]|D|@]|E|$11|12]]|$1|1I|3|1J|5|10|7|2P|8|@]|D|@]|E|$11|12]]|$1|1K|3|X|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|1L|3|1M|5|6|7|2R|8|@$9|2S|A|2T|B|C]|$9|2U|A|2V|B|C]]|D|@]|E|$]]|$1|1N|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]]|1O|$1P|$5|1Q|1R|1S|E|$1T|1U]]]]

<p>Unfortunately, a parent svg can't automatically get a <code>&lt;symbol&gt;</code> viewBox values.</p>
<p>So you either need to:</p>
<ul>
<li>copy the symbol's viewBox attribute to your <code>&lt;use&gt;</code> parent svg</li>
<li>calculate viewBox via javaScript (querying for referenced symbol instance)</li>
<li>create aspect-ratio css classes (as suggested by <a href="https://stackoverflow.com/questions/72834684/how-to-preserve-aspect-ratio-of-a-svg-symbol/72835113#72835113">@Dave Pritlove</a>)</li>
</ul>
<h3>Example 1: copied viewBox attribute (exact, scaled and rounded)</h3>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
  display: block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="display: none" &gt;
    &lt;symbol id="icon" viewBox="0 0 384 512"&gt;
      &lt;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"/&gt;
    &lt;/symbol&gt;
&lt;/svg&gt;

&lt;p&gt;Original viewBox values&lt;/p&gt;
&lt;svg height="1rem" viewBox="0 0 384 512"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;

&lt;p&gt;Upscaled viewBox values&lt;/p&gt;
&lt;svg height="1rem" viewBox="0 0 768 1024"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;

&lt;p&gt;Scaled down viewBox values&lt;/p&gt;
&lt;svg height="1rem" viewBox="0 0 3.84 5.12"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;

&lt;p&gt;Rounded&lt;/p&gt;
&lt;svg height="1rem" viewBox="0 0 4 5"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
<br />
Worth mentioning: you don't necessarily need the exact same values. Scaled values will work at well. Rounded values might also be OK for your needs - even though they actually change the precise aspect ratio.</p>
<h3>Example 2: viewBox attribute retrieved from referenced <code>&lt;symbol&gt;</code></h3>
<p>(Will only work with svgs inlined in your HTML body)</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 );
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
  display: inline-block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="display: none" &gt;
    &lt;symbol id="icon" viewBox="0 0 384 512"&gt;
      &lt;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"/&gt;
    &lt;/symbol&gt;
&lt;symbol id="address-card" viewBox="0 0 576 512"&gt;
    &lt;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"&gt;&lt;/path&gt;
  &lt;/symbol&gt;
  
&lt;/svg&gt;

&lt;p&gt;Original viewBox values&lt;/p&gt;
&lt;svg height="1rem" viewBox="0 0 384 512"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;
&lt;svg height="1rem" viewBox="0 0 576 512"&gt;
  &lt;use href="#address-card" /&gt;
&lt;/svg&gt;


&lt;p&gt;Js generated viewBox values&lt;/p&gt;
&lt;svg height="1rem"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;

&lt;svg height="1rem"&gt;
  &lt;use href="#address-card" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>BTW: <code>&lt;symbol&gt;</code> elements don't need to be nested in a <code>&lt;defs&gt;</code> since they are invisible by default.</p>


<p>I need to reuse multiple times some SVG icons, to avoid repetition I put them in a <code>&lt;defs&gt;</code> tag and reuse them later with <code>&lt;use&gt;</code>. However, I want to resize the icons by only defining the height, I expect the width to adapt automatically, but it doesn't work and I can't manage to find any solution. Is there anything possible to make the width dynamic?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
  display: block;
  margin: 1rem;
  padding: 1rem;
  background: rebeccapurple;
  color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="display: none" &gt;
  &lt;defs&gt;
    &lt;symbol id="icon" viewBox="0 0 384 512"&gt;
      &lt;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"/&gt;
    &lt;/symbol&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;!-- Doesn't work, the width is arbitrarily set to 300px. --&gt;
&lt;svg height="1rem"&gt;
  &lt;use href="#icon" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


How to preserve aspect ratio of a SVG symbol?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要多次重用一些SVG图标，为了避免重复，我将它们放在一个<defs>标记中，然后在<use>中重用它们。但是，我只想通过定义高度来调整图标的大小，我希望宽度能够自动调整，但是它不能工作，我无法找到任何解决方案。有什么可能使宽度动态吗？​svg {  display: block;  margin: 1rem;  p...

问如何保持SVG符号的高宽比？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持SVG符号的高宽比？EN