設置SVG preserveAspectRatio動態屬性

如果您有參考符號從一個壓縮文件使用SVG文件的角度成分：設置SVG preserveAspectRatio動態屬性

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="..."。

如果我想動態執行此操作，從組件實例HTML輸入中獲取preserveAspectRatio的值，該怎麼辦？

喜歡的東西：

想象我的圖標模板

<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') - 但它返回null結果。

有沒有一種方法進入陰影根目錄並修改符號元素？

來源

2017-01-05 user776686

有沒有這樣的方法。 –

-2

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

這些實施例在這裏給出：

與code-generation
可選地與HTML-injection

和可用值的aspectRatio可以看出here

來源

2017-08-31 17:43:17

設置SVG preserveAspectRatio動態屬性

回答

相關問題