我有一个基本的SVG图像,代表一个已选中的复选框。 SVG很简单:它包含一个框和一个复选标记。使用矩形和不透明蒙版构建复选标记。
每当我尝试在浏览器中显示图像时,只显示该框(而不是复选标记)。但是,在Inkscape中查看时,可以看到复选标记。
在Inkscape中查看时:
在Chrome中查看时:
如您所见,缺少复选标记。
知道为什么吗?
以下是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>