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

如果我想动态地执行此操作，从组件实例HTML输入中获取preserveAspectRatio的值，该怎么办？

类似的东西：

虚构的my-icon模板

<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结果。

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

Answer 1

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

示例如下：

与code-generation
或HTML-injection

可以看到 aspectRatio 的可用值here

动态设置SVG preserveAspectRatio属性

1 个答案: