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

时间：2015-02-17 22:16:40

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

我已收到要在HTML5项目中使用的SVG SMIL文件。我在使用SVG SMIL文件时并不熟悉，在打开文件时我可以看到它是XML格式的，我已经做了所有必要的更改，以使其在HTML5中工作，但它没有通过W3C验证，我想修复。

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

<!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>

2 个答案:

答案 0 :(得分：2)

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

fill表示动画结束时保留最终的动画值，remove表示动画完成后恢复为原始基值。

由您决定哪些符合您的功能要求。

答案 1 :(得分：1)

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

我不知道你在代码中使用fill="none"想要实现的目标，我无法建议一个有效的替代方案......所以，如果你发布另一个问题来解释你想要实现的目标，你可以获得一些替代fill="none"以获得它的答案。

相关问题
最新问题