设置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动态属性

回答

相关问题