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

更新

在评论的帮助下弄清楚了。这是node对Svg.node。当我改变它时Svg.node，问题就消失了。问题是：

  1. 为什么要修复它？
  2. 这里的幕后发生了什么使这变得重要？
  3. 可以将其设为类型安全，以便我遇到的问题可能是编译时错误吗？
4

2 回答 2

3

这两条线的原因：

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. 所以对于编译器来说，两者都是相同的类型。同样 forHtm.Html和Svg.Svgwhich 都是 的别名VirtualDom.Node。

最后两个node函数都有签名

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

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

于 2016-02-17T14:11:59.827 回答
1

仅供参考，以下是这两个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

发生这种情况时，编译器可能会警告您。

于 2016-02-18T06:50:02.200 回答