<object> 插入的外部 svg 对 svg 中的更改高度没有反应答案

【问题标题】：external svg plugged in by <object> has no reaction on change height in svg<object> 插入的外部 svg 对 svg 中的更改高度没有反应
【发布时间】：2022-01-04 12:49:16
【问题描述】：

我有外部 svg：

<?xml-stylesheet type="text/css" href="../../css/style.css" ?>
<svg class="header__nav-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.75 14.75H1.25C0.559625 14.75 0 15.1082 0 15.55C0 15.9918 0.559625 16.35 1.25 16.35H30.75C31.4404 16.35 32 15.9918 32 15.55C32 15.1082 31.4404 14.75 30.75 14.75Z" fill="#444444"/>
<path d="M30.75 4.75H1.25C0.559625 4.75 0 5.10816 0 5.55C0 5.99184 0.559625 6.35 1.25 6.35H30.75C31.4404 6.35 32 5.99184 32 5.55C32 5.10816 31.4404 4.75 30.75 4.75Z" fill="#444444"/>
<path d="M30.75 24.75H1.25C0.559625 24.75 0 25.1082 0 25.55C0 25.9918 0.559625 26.35 1.25 26.35H30.75C31.4404 26.35 32 25.9918 32 25.55C32 25.1082 31.4404 24.75 30.75 24.75Z" fill="#444444"/>
</svg>

如果我设置默认高度值height="30px" 一切正常，但在这种情况下我无法在 css 中设置大小属性

我有下一个 css，但它不起作用并且 svg 保持 0x0 大小：

.header__nav-icon {
  height: 30px;
}

@media screen and (max-width: 380px) {
  .header__nav-icon {
    height: 24px;
  }
}

有什么问题？

【问题讨论】：

标签： html css svg size

【解决方案1】：

这不是问题，而是对 svg <object> 'embedding' 方法的常见误解：

您的 svg 位于同一个域中：

<object class="svgObject" id="svgObject" data="navicon.svg" type="image/svg+xml" ></object>

您可以像这样通过 javaScript 访问 svg DOM：

let svgObject = document.querySelector('object[type="image/svg+xml"]');
if(svgObject){
svgObject.addEventListener("load",function(){
    let svgDoc = svgObject.contentDocument;
    let objectSvg = svgDoc.querySelector('svg');
    objectSvg.setAttribute('fill', 'blue');
    objectSvg.setAttribute('height', '32');
});
}

最重要的是，您需要加载事件监听器之类的东西，因为您的 svg 数据不能立即用于 DOM 操作 或 css 样式。

如果您的目标是最好的 css 样式（或 js 处理）能力——我宁愿推荐一种像这样的“内联 svg”方法：

.svgInline{
    display:inline-block;
    width:1em;
    height:1em;
    font-size:32px;
}

.green{
  color:green;
}

.baselineAdjust .svgInline{
    position:relative;
    bottom:-0.15em;
    height:1em;
    font-size:1em;
}

<svg class="header__nav-icon" style="display:none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <symbol id="naviconInline" fill="currentColor" viewBox="0 0 32 32" >
        <path id="hStroke" d="M30.75 4.75H1.25c-.69 0-1.25.36-1.25.8 0 .44.56.8 1.25.8h29.5c.69 0 1.25-.36 1.25-.8 0-.44-.56-.8-1.25-.8Z"/>
        <use href="#hStroke" />
        <use href="#hStroke" y="10" />
        <use href="#hStroke" y="20" />
    </symbol>
</svg>

<h3>SVG inlined (reused)</h3>
<p class="green baselineAdjust">
    <svg class="svgInline" >
        <use href="#naviconInline" />
    </svg>
     Navigation
</p>

值得一读：csstricks.com: Using SVG

【讨论】：