Javascript 动态设置SVG PreserveSpectRatio属性

如果有一个角度组件通过引用一个压缩文件中的符号来使用svg文件：

svg实例

<svg>
  <use xlink:href="#my-symbol"></use>
</svg>

所需渲染：

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://somedomain.com/my.svg#my-symbol"></use>
    #shadow-root (user agent)
       <svg id="my-symbol" viewBox="0 0 24 24"> <!-- attribute should go to this svg -->
            ...
        </svg>
</svg>

#影子根（用户代理）
...

我在容器上尝试了

querySelector（'symbol'）

，但它返回空结果

---

是否有一种方法可以进入阴影根并修改符号元素？

在JS中，您可以对svg.preserveAspectRatio.baseVal.align使用直接赋值。 相反，在HTML 您可以编写

svg.preserveSpectratio.baseVal.align=1

或

svg.setAttribute（'preserveSpectratio'，'none'）在JS脚本中

以下为示例：


与
交替地

aspectRatio的可用值可以看到
没有这样的方法。我今天发现，当路径在svg中时，代码生成方法无法满足
setAttribute（'preserveSpectRatio'，'none'）
的要求，但html注入在所有浏览器中都满足这一要求。什么是eff？这里有两支钢笔：代码生成：（失败）Html注入：（有效）
<my-icon preserveAR="alignMeetOrSlice">
  <svg preserveAspectRatio="{{preserveAR}}">
    <use xlink:href="#my-symbol"></use>
  </svg>
</my-icon>

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://somedomain.com/my.svg#my-symbol"></use>
    #shadow-root (user agent)
       <svg id="my-symbol" viewBox="0 0 24 24"> <!-- attribute should go to this svg -->
            ...
        </svg>
</svg>