生成时不渲染 Svg 遮罩

Question

<svg x="0" y="0" height="2048" width="4096" style="position: absolute; top: 0px; left: 0px; pointer-events: none;">
   <defs>
      <mask x="0" y="0" id="shadowLayerMask">
         <polygon fill="#FFF" points="1042,1578 630,2048 3902,2048 3370,1464"></polygon>
      </mask>
   </defs>
   <rect x="0" y="0" fill="red" mask="url(#shadowLayerMask)" maskContentUnits="userSpaceOnUse" height="2048" width="4096"></rect>
</svg>

简单吧？事情是这样的，如果我把这个 svg 放到一个 html 文件中，掩码就可以完美地工作。但是当我使用虚拟 dom 生成相同的 svg 时，遮罩没有效果，我们只有一个巨大的红色矩形。

如果我打开开发人员工具并将毫无意义的<defs></defs> 添加到 svg，我可以在生成时显示它。这似乎以某种方式踢了 svg 并提醒它需要屏蔽。

有人知道这里发生了什么吗？是否有不涉及设置计时器以注入空defs 的解决方法？

更新：

这里是源码

render : Layer -> Html
render { key, shader, mask, size } =
  let
    key' =
      key ++ "LayerMask"

    style' =
      [ "position" => "absolute"
      , "top" => "0px"
      , "left" => "0px"
      , "pointer-events" => "none"
      ]

    hw =
      [ A.height << toString <| getY size
      , A.width << toString <| getX size
      ]

    polygon =
      Svg.polygon
        [ A.fill "#FFF"
        , toPoints mask
        ]
        []

    mask' =
      node
        "mask"
        [ A.x "0", A.y "0", id key' ]
        [ polygon ]

    image =
      Svg.rect
        (A.x "0"
          ::
            A.y "0"
          --   :: A.xlinkHref shader
          ::
            A.fill "red"
          ::
            A.mask (url key')
          ::
            A.maskContentUnits "userSpaceOnUse"
          ::
            hw
        )
        []
  in
    Svg.svg
      (A.x "0" :: A.y "0" :: style style' :: hw)
      [ Svg.defs [] [ mask' ]
      , image
      ]

这里有一些相关的导入

import Html exposing (..)
import Svg
import Svg.Attributes as A
import Html.Attributes as H exposing (style, id)

更新

在 cmets 的帮助下解决了这个问题。这是node 与Svg.node。当我将其更改为Svg.node 时，问题就消失了。问题是：

1. 为什么要修复它？
2. 究竟是什么让这变得如此重要？
3. 是否可以将其设为类型安全，以便我遇到的问题可能是编译时错误？

Answer 1

这2行的原因：

import Html exposing (..)
import Svg

第一个导入Html 的所有属性，包括node，第二个只是导入Svg 命名空间。所以当你在这个环境中使用node 时，node 就是Html.node。你会得到这个导入的编译错误：

import Html exposing (..)
import Svg exposing (..)

或者这个：

import Html exposing (node)
import Svg exposing (node)

因为那时，Elm 不知道您想使用哪个 node。 所以导入你需要的函数而不使用(..)

会更安全

所以主要问题是为什么Html.node 接受List Svg.Attribute 而不抛出错误。它的原因Svg.Attribute 和Html.Attribute 不是真正的类型，而是VirtualDom.Property 的类型别名。所以对于编译器来说，两者都是相同的类型。 Htm.Html 和 Svg.Svg 相同，它们都是 VirtualDom.Node 的别名。

最后两个node 函数都有签名

String -> List VirtualDom.Property -> List VirtualDom.Node -> VirtualDom.Node

所以编译器无法区分它们。

Answer 2

仅供参考，以下是node 两个函数的代码：

--Html.node
node : String -> List Attribute -> List Html -> Html
node =
    VirtualDom.node


--Svg.node
node : String -> List Attribute -> List Svg -> Svg
node name =
  \attributes children ->
    VirtualDom.node name (svgNamespace :: attributes) children

当这种情况发生时，也许编译器应该警告你。