css - SVG inline - 默认或继承的高度

标签 css svg responsive-design

请帮助我了解元素从哪里获得 150 像素的高度?

在我的元素中,我希望元素与内容大小相同 但是根 svg 元素和可见 svg 得到 150px 的高度(可能空间不足)

我用类似的条件制作演示。 http://plnkr.co/edit/2EJiwZFSwjD2f4wrETiX?p=preview

<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<symbol id="icon-smile" viewBox="0 0 1024 1024">
<rect fill="yellowgreen" width="100%" height="100%"/>
<path class="path1" d="M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512-512 229.23-512 512 229.23 512 512 512zM512 96c229.75 0 416 186.25 416 416s-186.25 416-416 416-416-186.25-416-416 186.25-416 416-416zM256 320c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64s-64-28.654-64-64zM640 320c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64s-64-28.654-64-64zM704.098 627.26l82.328 49.396c-55.962 93.070-157.916 155.344-274.426 155.344s-218.464-62.274-274.426-155.344l82.328-49.396c39.174 65.148 110.542 108.74 192.098 108.74s152.924-43.592 192.098-108.74z"></path>
</symbol>
</svg> 
<div class=kx-rule>
<div class="cell col-md-3 col-sm-3">
 <svg class="u-icon" >
   <use xlink:href='#icon-smile'/>
</svg>  
</div>
</div>
</body>

我知道我可以调整 svg 的大小,但我想了解它的行为。我将 svg Canvas 无限放大,但为什么它(视口(viewport)?)以这样的高度渲染?

最佳答案

svg 元素

<svg class="u-icon" >

既没有高度/宽度属性/样式也没有 viewBox,因此它获得了 300 的后备高度/宽度x 150 px根据替换元素的规则。

关于css - SVG inline - 默认或继承的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29035847/

相关文章:

javascript - 如何用d3.js制作一个从黑到白连续闪烁的svg文本?

javascript - CSS 在基于 URL 上工作,但不在网站的其他页面上工作。代码点火器

css - 我的设备分辨率为 720px,但在浏览器中宽度为 360px

css - 如果有人将某物称为 BootStrap,这意味着什么?

html - 带有 CSS 过渡的 SVG 过滤器

vertical-alignment - 行高顶部垂直对齐(或没有行高的垂直间距)

javascript - 优化SVG游戏

css - 如何在移动优先响应网格中以两列三行棋盘显示内容

css - 将搜索框插入标题图片

css - 在 HTML5 中实现动画插入符号的好方法?