Question

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

我是否宣布错误或未实施？

示例页面：http://www.lisa.ink/svg/

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

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

HTML：

<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：

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

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

HTML：

<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：

<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>

第3。使用带有本地

的外部符号

HTML：

<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>

外部svg：

spring.jpa.hibernate.ddl-auto=update

在外部符号中使用过滤器

0 个答案: