HTML5 验证器不接受 AMPHTML 广告答案

【问题标题】：AMPHTML ads not accepted by HTML5 validatorHTML5 验证器不接受 AMPHTML 广告
【发布时间】：2020-06-04 19:34:09
【问题描述】：

刚刚使用 Adobe Animate CC 制作了我的第一个 AMPHTML 广告。

我尝试使用https://h5validator.appspot.com/ 验证广告

我的广告未通过高级 HTML5 检查。我收到以下错误消息：

您的某个 HTML5 资源无效，无法分析。请更正任何格式错误的资产，然后重试。更多细节： SVG_INVALID

这是广告的源代码。这里有人知道可能是什么问题吗？

 <!doctype html>
<html amp4ads>
<head>
	<!-- export v1.0.36-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1">
	<style amp4ads-boilerplate>body{visibility:hidden}</style>
	<style amp-custom> img {position: absolute;} body {background-color: rgba(255,255,255,1.0000);}
	  svg {width: 300px; height: 300px; position: absolute;}     .hideForPreload { visibility: hidden; }   </style>
	<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
	<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>

<body  >
<amp-analytics type="googleanalytics" id="pageView">
<script type="application/json">
{
  "vars": {
	"account": "No ID found."
  },
  "triggers": {
	"trackPageview": {
	  "on": "visible",
	  "request": "pageview"
	}
  }
}
</script></amp-analytics>
<div id="svgWrapper" class="hideForPreload" >
	<svg style="width: 0; height: 0;">
		<defs>
			<g vector-effect="none" id="l0" >
                				    <g vector-effect="inherit" id="l0o0" style="transform: matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000); opacity: 1.0000; visibility: inherit;">
					<path vector-effect="inherit" fill="rgba(0,0,204,1.000)" stroke="none" d="M 300.0000 0.0000 L 0.0000 0.0000 L 0.0000 300.0000 L 300.0000 300.0000 L 300.0000 0.0000 "></path>
				    </g>
                			</g>
		</defs>
</svg>				<svg><use id="o0" xlink:href="#l0" ></use></svg>
	
</div>
<amp-animation layout="nodisplay" trigger="visibility">
	<script type="application/json">
		{"animations":[
         {
           "selector": "#svgWrapper",
           "duration":"1s",
           "iterations":1,
           "fill":"both",
           "keyframes": [
             {
               "offset" : 0,
               "visibility" : "inherit",
               "easing" : "step-start"
             },{
               "offset" : 1,
               "visibility" : "inherit",
               "easing" : "step-end"
              }
           ]
         },
{
	"selector" : "#o0",
	"duration" : "2s",
	"iterations" : "infinity",
	"fill" : "both",
	"keyframes" : [
		{
			"offset" : 0,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667)"
		},
		{
			"offset" : 1,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "step-end"
		}
	]
}
		]}
	</script>
</amp-animation>
</body>
</html>

【问题讨论】：

标签： html jquery-animate amp-html html5-validation

【解决方案1】：

AMPHTML 不是 HTML5。

您的验证器应该已经抱怨 html 标记中的 amp4ads 属性。

使用 AMP4ADS validator 检查您的 AMPHTML。

【讨论】：

【解决方案2】：

根据https://greensock.com/forums/topic/14239-h5-validator-advanced-html-check-svg_invalid/?tab=comments#comment-98301 您的 svg 标签（注意可能有几个“svg”标签实例）缺少正确的配置文件描述：

<svg baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

我在使用 Animate (v.19) + AMP4ADS 导出横幅后遇到的另一个错误是“CLICK_TAG_MISSING”。这个可以通过以下方式修复：

<script type="text/javascript">
var clickTag = "https://www.nasa.gov";
</script>

【讨论】：