Svg 在外部符号内使用过滤器

我正在尝试使用带有过滤器的外部符号。不幸的是，浏览器似乎不支持此功能

我是在宣布错误还是没有实施

示例页面：

Chrome仅显示最后一个svg
Firefox按预期显示第一个和第二个svg
Safari仅按预期显示最后一个svg

1。仅使用片段标识符的外部符号

html:

外部svg：

2。使用带有完整IRI的外部符号

html:

外部svg:

3。使用带有本地的外部符号

html:

外部svg:

这些符号不在defs元素内。这是我发现的第一个错误。请把你的密码贴出来。在查看源代码时，我对我的问题和源文件做了一些改进。正式地说，defs元素只会阻止内部元素的渲染，因此它不是必需的，只是建议使用。但我改变了它，令人惊讶的是，Firefox内部的第一个svg变成了预期的形式，只有1和2可以工作。3将是一个bug（并且是一个已知的Chrome bug），因为url引用是本地的，即应该只在文件本身中匹配。

<svg>
    <use xlink:href="/svg/rect.svg#rect" />
</svg>

<svg>
  <defs>
    <filter id="hueRotate">
       <feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
    </filter>
    <symbol id="rect"  viewBox="0 0 640 550">
      <rect x="0" y="0" width="200" height="200" fill="red" filter="url(#hueRotate)" />
    </symbol>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="/svg/rect.svg#rectWithFullUrl" />
</svg>

<svg>
  <defs>
    <filter id="hueRotate">
       <feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
    </filter>
    <symbol id="rectWithFullUrl"  viewBox="0 0 640 550">
      <rect x="0" y="0" width="200" height="200" fill="red" filter="url(/svg/rect.svg#hueRotate)" />
    </symbol>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="/svg/rect.svg#rectWithMissingFilter" />
</svg>


<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="missingHueRotate">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
        </filter>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="rectWithMissingFilter"  viewBox="0 0 640 550">
      <rect x="0" y="0" width="200" height="200" fill="red" filter="url(#missingHueRotate)" />
    </symbol>
  </def>
</svg>