如何保持SVG符号的高宽比？
如何保持SVG符号的高宽比？
提问于 2022-07-01 21:15:34
我需要多次重用一些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>
回答 2
Stack Overflow用户
发布于 2022-07-02 16:56:20
不幸的是，父svg无法自动获得<symbol> viewBox值。
所以你要么需要：
instance)
- create
- 将符号的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>中，因为它们在默认情况下是不可见的。
Stack Overflow用户
发布于 2022-07-01 22:24:43
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72834684
复制相关文章
相似问题
腾讯云开发者
