带掩码的SVG无法在浏览器中完全显示(Chrome,IE,FF)

时间:2015-07-31 12:15:04

标签: google-chrome internet-explorer firefox svg mask

我有一个基本的SVG图像,代表一个已选中的复选框。 SVG很简单:它包含一个框和一个复选标记。使用矩形和不透明蒙版构建复选标记。

每当我尝试在浏览器中显示图像时,只显示该框(而不是复选标记)。但是,在Inkscape中查看时,可以看到复选标记。

在Inkscape中查看时:

Screenshot in Inkscape

在Chrome中查看时:

Screenshot in Chrome. Checkmark missing.

如您所见,缺少复选标记。

知道为什么吗?

以下是SVG文件的内容:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 128 128"
   id="svg18224"
   version="1.1"
   preserveAspectRatio="none"
   height="100%"
   width="100%">
  <defs
     id="defs18226">
    <mask
       maskUnits="userSpaceOnUse"
       id="mask14914-3">
      <g
         id="g14916-7"
         transform="matrix(0.8660254,0.5,-0.5,0.8660254,520.04499,95.778737)">
        <rect
           y="932.36218"
           x="52"
           height="120"
           width="28.690361"
           id="rect14918-5"
           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
        <rect
           transform="matrix(0,-1,1,0,0,0)"
           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
           id="rect14920-6"
           width="28.690361"
           height="68"
           x="-1052.3622"
           y="12" />
      </g>
    </mask>
  </defs>
  <metadata
     id="metadata18229">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     style="fill:#222222;fill-opacity:1"
     id="layer1"
     transform="translate(0,-924.36219)">
    <path
       style="opacity:1;fill:#222222;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 0,0 0,128 128,0 0,-128 z m 8,8 112,0 0,112 -112,0 z"
       transform="translate(0,924.36219)"
       id="rect18774" />
    <rect
       transform="matrix(0.6875,0,0,0.6874999,20,308.86329)"
       style="opacity:1;fill:#222222;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect6715-2-9"
       width="128"
       height="128.00002"
       x="0"
       y="924.36218"
       mask="url(#mask14914-3)" />
  </g>
</svg>

0 个答案:

没有答案