SVG SMIL HTML5 元素集属性填充的错误值“无”答案

【问题标题】：SVG SMIL HTML5 Bad value `none` for attribute fill on element setSVG SMIL HTML5 元素集属性填充的错误值“无”
【发布时间】：2015-02-17 22:16:40
【问题描述】：

我收到了一个 SVG SMIL 文件，我想在 HTML5 项目中使用它。我在使用 SVG SMIL 文件时并不熟悉，在打开文件时我可以看到它是 XML 格式，并且我已经完成了所有必要的更改以使其在 HTML5 中工作，但是它不能通过我想要的 W3C 进行验证使固定。

问题似乎是在 HTML5 中使用 value:none 验证失败，实际上它重复了 11 次，正如 w3c Bad value none for attribute fill on element set. 所报告的那样。我希望你们中的一个明亮的火花可以指出我解决这个问题的正确方向你可以在下面看到我的完整代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Project</title>
</head>
<body>
<svg version="1.1" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="canvasMask"><rect x="0" y="0" width="2560px" height="1440px" fill="#FFFFFF" stroke="none"/></mask>
    </defs>
    <rect fill="#ffffff" stroke="none" x="0" y="0" width="2560px" height="1440px"/>
    <g id="id9bd0d08a1535f0fee8058e02" mask="url(#canvasMask)">
        <image id="idf94d0269df15dd8365325749" xlink:href="http://www.example.com/placeholder.png" width="2560px" height="1440px" visibility="hidden">
            <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
            <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1279.999 715.999" to="1279.999 715.999" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="scale" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1.007112705842029 1.0059462593277573" to="1.007112705842029 1.0059462593277573" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="-1280.0 -720.0" to="-1280.0 -720.0" calcMode="discrete"/>
        </image>
        <g id="id8dea74305ccf397f1904b8e7" visibility="hidden">
            <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
            <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="0.0 0.0" to="0.0 0.0" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="-0.0 -0.0" to="-0.0 -0.0" calcMode="discrete"/>
            <path id="idfabee4aa5eaa0c6e65db7ea4" d="M 1113.895,597.719 L 1112.895,597.719 L 1111.895,597.719 L 1109.895,597.719 L 1105.895,598.719 L 1101.895,600.719 L 1097.895,601.719 L 1085.895,605.719 L 1077.895,606.719 L 1068.895,607.719 L 1060.895,608.719 L 1051.895,610.719 L 1026.895,613.719 L 1013.895,615.719 L 998.895,618.719 L 985.895,621.719 L 972.895,625.719 L 960.895,628.719 L 942.895,636.719 L 938.895,639.719 L 934.895,643.719 L 932.895,645.719 L 929.895,648.719 L 928.895,654.719 L 928.895,656.719 L 928.895,659.719 L 929.895,664.719 L 930.895,666.719 L 932.895,668.719 L 935.895,672.719 L 950.895,690.719 L 964.895,702.719 L 988.895,722.719 L 997.895,728.719 L 1004.895,731.719 L 1015.895,737.719 L 1022.895,740.719 L 1030.895,743.719 L 1038.895,748.719 L 1048.895,751.719 L 1062.895,756.719 L 1075.895,760.719 L 1093.895,765.719 L 1109.895,771.719 L 1152.895,784.719 L 1190.895,798.719 L 1212.895,808.719 L 1230.895,814.719 L 1245.895,824.719 L 1258.895,830.719 L 1271.895,838.719 L 1308.895,871.719 L 1315.895,880.719 L 1319.895,887.719 L 1326.895,904.719 L 1328.895,912.719 L 1329.895,920.719 L 1328.895,928.719 L 1326.895,935.719 L 1322.895,944.719 L 1315.895,953.719 L 1306.895,964.719 L 1298.895,971.719 L 1288.895,980.719 L 1280.895,987.719 L 1243.895,1008.719 L 1206.895,1019.719 L 1180.895,1024.719 L 1146.895,1027.719 L 1115.895,1027.719 L 1081.895,1027.719 L 1049.895,1024.719 L 988.895,1011.719 L 957.895,1002.719 L 930.895,995.719 L 910.895,989.719 L 889.895,981.719 L 869.895,975.719 L 852.895,968.719 L 820.895,951.719 L 805.895,941.719 L 787.895,929.719 L 772.895,914.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
                <set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
                <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="997.636 795.5" to="1563.636 593.5"/>
                <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1051.395 -812.719" to="-1051.395 -812.719" calcMode="discrete"/>
            </path>
            <path id="id182b2443fa479d88d6788af0" d="M 1026.895,472.719 C 955.895,814.719 809.895,964.719 1122.895,952.719 C 1435.895,940.719 1658.895,907.719 1467.895,772.719 C 1276.895,637.719 1271.895,584.719 1158.895,536.719 C 1045.895,488.719 1026.895,472.719 1026.895,472.719 M 1026.895,472.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
                <set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
                <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="1180.703 695.832" to="1746.703 493.832"/>
                <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1234.463 -713.052" to="-1234.463 -713.052" calcMode="discrete"/>
            </path>
        </g>
    </g>
    <rect id="looper" x="0" y="0" width="1" height="1" style="fill: none; stroke: none"><set id="loop" attributeName="x" to="0" begin="0s; loop.end" dur="10s" fill="freeze"/></rect>
</svg>
</body>
</html>

【问题讨论】：

标签： html svg w3c w3c-validation svg-animate

【解决方案1】：

当 fill 是 set 的属性时，fill are freeze and remove 的有效值。注： remove 是默认值，因此您很少看到要删除的填充设置。

fill 表示动画结束时保持最终动画值，remove 表示动画结束时恢复到原始基值。

您可以自行决定其中哪些满足您的功能要求。

【讨论】：

【解决方案2】：

W3C HTML5 验证器维护者在这里。据我所见，验证器在此处的行为符合预期，并符合 SVG 规范中的文档一致性要求。因为在http://www.w3.org/TR/SVG/animate.html#FillAttribute（如另一个答案中所述）SVG 定义了fill = "freeze" | "remove"，所以fill="none" 无效。

并且不知道您要在代码中使用 fill="none" 来实现什么，我无法提出有效的替代方案……因此，也许如果您发布另一个问题来解释您要实现的目标，您可以获得一些回答什么替换fill="none" 得到它。

【讨论】：