如何更改以下 SVG 过滤器，以便将其应用于 HTML 元素中的文本？

Posted 2023-03-28

【中文标题】如何更改以下 SVG 过滤器，以便将其应用于 HTML 元素中的文本？

【英文标题】：How do I change the following SVG filter so that it will get applied to a text in an HTML element?

【发布时间】：2022-01-20 06:36:29

【问题描述】：

我试过删除

<!-- DILATED TEXT -->
    <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text>

<feMergeNode in="SourceGraphic" /> 和 in="SourceAlpha" 部分在代码中，因此它将应用于通过 CSS 引用的元素，但它只是擦除文本，并且不会产生它应该产生的轮廓.

如何将 OUTLINE 部分应用于 html 元素？

所有 SVG 文本效果教程都暗示文本位于 SVG 元素内，但我需要通过 SVG 过滤器将此文本笔划应用于 HTML 元素中的文本。

<svg   viewBox="100 0 900 200">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology>
        
        <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood>
        <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>

    <!-- DILATED TEXT -->
    <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text>
</svg>

【参考方案1】：

您只需以相同的方式将过滤器应用于 HTML 文本...

p 
  font-size: 85px;
  font-weight: 700;
  filter: url(#outline);

<svg  >
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology>
        
        <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood>
        <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>
<p>upgrade yourself</p>

【讨论】：

啊，所以它在从文档中引用时有效？好的，我会测试并回信。我曾经做过外部引用，但是我现在正在改变这种做法，因为 Safari 不支持它。我可以确认外部引用此过滤器在任何浏览器中都不起作用。它对你有用吗？

我刚刚测试过，这个过滤器在外部引用时在 Chrome 中不起作用。这就是问题所在。感谢您对此进行测试。

无论如何，外部引用都是不好的做法，根本不支持来自 Safari 的外部引用。

Firefox 支持外部引用。