動態設置SVG prepareAspectRatio屬性

Question

如果您有一個Angular組件通過引用一個打包文件中的符號來使用svg文件：

svg實例

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

出現在導入文件中的符號

<symbol id="my-symbol" viewBox="0 0 24 24">
  <title>my-symbol</title>
  <path class="path1" d=" ... data here ..."></path>
</symbol>

為了獲得對縮放行為的控制，顯然每個符號元素都應相應地設置preserveAspectRatio="..." 。

如果我想這樣做動態，取值preserveAspectRatio從組件實例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>

我在容器上嘗試使用querySelector('symbol') -但返回空結果。

是否有進入影子根目錄並修改symbol元素的方法？

Answer 1

在JS中，您可以對svg.preserveAspectRatio.baseVal.align使用直接分配。 代替preserveAspectRatio="none"中的HTML可以寫svg.preserveAspectRatio.baseVal.align=1或svg.setAttribute('preserveAspectRatio', 'none'); 在JS腳本中。

此處顯示示例：

• 具有代碼生成
• 或者使用HTML注入

在這里可以看到AspectRatio的可用值