2015-02-17 51 views
0

我收到了一个我想在HTML5项目中使用的SVG SMIL文件。我在使用SVG SMIL文件时并不熟悉,并且在打开文件时我可以看到它是XML格式的,并且我已经做了所有必要的更改以使其能够在HTML5中工作,但是它不通过W3C验证,我希望固定。SVG SMIL HTML5对于元素集上的属性填充,值为'none'

问题似乎是,使用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> 

回答

1

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

而且在代码中不知道你想用fill="none"达到什么目的,我不能建议一个有效的选择......所以,如果你发布另一个问题来解释你想达到的目标,你可以得到一些答案要取代fill="none"才能得到它。

2

当fill是set的属性时,fill are freeze and remove的有效值。注:删除是默认值,所以你很少看到填充设置为删除。

填充方式动画结束时保留最终的动画值,移除动画完成时返回原始基值。

您需要确定哪些符合您的功能要求。