<time>元素内是否允许嵌套<svg>元素？

你碰到的问题核心不在于对短语内容的理解偏差，而是<time>元素存在额外的语义内容限制：

• MDN确实说明<time>的允许内容是短语内容，且<svg>属于短语内容范畴，但HTML规范对<time>的内容有更严格的要求：它的内容必须包含可被识别为日期/时间的文本内容，不能仅包含非文本类的短语内容（比如纯<svg>）。
• W3C验证器报错，正是因为你的示例里<time>标签内只有<svg>，没有任何时间相关的文本，不符合<time>的语义使用规则。

修正示例 #

只要在<time>内添加时间文本（哪怕是仅用于语义的隐藏文本），就能通过验证：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>svg within time test</title>
        <style>
            .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
        </style>
    </head>
    <body>
        <time datetime="12:30">
            <span class="sr-only">12:30</span>
            <svg version="1.1" class="separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 100">
                <g class="sep">
                    <circle cx="30" cy="30" r="9.52"/>
                    <circle cx="30" cy="70" r="9.52"/>
                </g>
            </svg>
        </time>
    </body>
</html>

或者直接将<svg>作为时间文本的附属元素：

<time datetime="2024-05-20">
    2024-05-20 <svg><!-- ... --></svg>
</time>

总结 #

<time>的核心语义是标记时间相关内容，因此必须包含对应的时间文本（可见或仅用于语义的隐藏文本均可），纯<svg>不符合这一语义要求，因此会被验证器判定为错误。

内容的提问来源于stack exchange，提问作者domsson