SVG SMIL HTML5 元素集属性填充的错误值 `none`
SVG SMIL HTML5 Bad value `none` for attribute fill on element set
我收到了一个 SVG SMIL 文件，我想在 HTML5 项目中使用它。我不太熟悉使用 SVG SMIL 文件，打开文件后我可以看到它是 XML 格式，我已经完成了所有必要的更改以使其在 HTML5 中工作，但它没有通过我想修复的 W3C 验证。
问题似乎是使用 value:none 在 HTML5 中验证失败，实际上它重复了 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>
当 fill 是集合的属性时 fill are freeze and remove 的有效值。 N.B。 remove 是默认值，因此您很少看到 fill 设置为 remove。
fill表示动画结束时保留最终的动画值，remove表示动画结束时恢复为原始基值。
由您来决定其中哪些满足您的功能要求。
W3C HTML5 验证者维护者在这里。据我所知，验证器的行为符合预期，符合 SVG 规范中的文档一致性要求。因为在 http://www.w3.org/TR/SVG/animate.html#FillAttribute（如另一个答案中所述），SVG 定义了 fill = "freeze" | "remove"，所以 fill="none" 无效。
并且不知道你想用代码中的 fill="none" 实现什么，我不能建议一个有效的替代方案......所以也许如果你 post 另一个问题解释你是什么试图实现，你可以得到一些关于替换什么的答案fill="none"得到它。
我收到了一个 SVG SMIL 文件，我想在 HTML5 项目中使用它。我不太熟悉使用 SVG SMIL 文件，打开文件后我可以看到它是 XML 格式，我已经完成了所有必要的更改以使其在 HTML5 中工作，但它没有通过我想修复的 W3C 验证。
问题似乎是使用 value:none 在 HTML5 中验证失败，实际上它重复了 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>
当 fill 是集合的属性时 fill are freeze and remove 的有效值。 N.B。 remove 是默认值，因此您很少看到 fill 设置为 remove。
fill表示动画结束时保留最终的动画值，remove表示动画结束时恢复为原始基值。
由您来决定其中哪些满足您的功能要求。
W3C HTML5 验证者维护者在这里。据我所知，验证器的行为符合预期，符合 SVG 规范中的文档一致性要求。因为在 http://www.w3.org/TR/SVG/animate.html#FillAttribute（如另一个答案中所述），SVG 定义了 fill = "freeze" | "remove"，所以 fill="none" 无效。
并且不知道你想用代码中的 fill="none" 实现什么，我不能建议一个有效的替代方案......所以也许如果你 post 另一个问题解释你是什么试图实现，你可以得到一些关于替换什么的答案fill="none"得到它。