ChatGPT解决这个技术问题 Extra ChatGPT

是否需要 'xmlns' 和 'version' 等 SVG 参数?

在我在互联网上看到的大约一半的 svg 示例中,代码都包含在简单的 <svg></svg> 标记中。

在另一半,svg 标签有很多复杂的属性,比如:

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

我的问题是:可以使用简单的 svg 标签吗?我试过玩复杂的,如果我不包括它们,一切都很好。


s
sleske

xmlns="http://www.w3.org/2000/svg" 属性是:

图像/svg+xml 文件需要。 1

对于内联 是可选的。 2

xmlns:xlink="http://www.w3.org/1999/xlink" 属性是:

对于具有 xlink: 属性的图像/svg+xml 文件是必需的。 1

对于带有 xlink: 属性的内联 是可选的。 2

version="1.1" 属性是:

建议符合 image/svg+xml 文件标准。 3

显然被每个用户代理忽略。 4

在 SVG 2. 5 中移除

1 Internationalized Resource Identifiers (RFC3987)
2 Since HTML5
3 Extensible Markup Language (XML) 1.0
4可能要等到其他主要版本的发布。
5 SVG 2, W3C Candidate Recommendation, 07 August 2018


它需要是http还是也可以是https?
@JohannesB 两种协议都兼容:D
@JohannesB 是的,这里有一个 inlined 示例 HTTP HTTPSimage/svg+xml 文件,其中 inlined svg 和 xlink 属性示例 HTTP HTTPS
谢谢,猜猜尼克·克拉弗也会犯错;)
不要将 xml 声明 (<?xml version...) 的 version 属性误认为 <svg> 元素的 version 属性。第一个是关于 XML 标记语言的版本,而后一个是指定 SVG 的版本。这个答案的作者通过引用 XML 而不是 ³ 中的 SVG 规范犯了这个错误。我试图纠正它,但一些白痴拒绝了编辑。
s
sleske

所有用户代理(浏览器)都会忽略版本属性,因此您可以随时删除它。

如果您将 SVG 内联嵌入 HTML 页面并将该页面作为 text/html 提供,那么 xmlns attributes are not required。在 HTML 文档中嵌入 SVG 是一项相当新的创新,它是作为 HTML5 的一部分出现的。

但是,如果您将页面作为 image/svg+xml 或 application/xhtml+xml 或任何其他导致用户代理使用 XML 解析器的 MIME 类型,那么 the xmlns attributes are required。直到最近,这是唯一的做事方式,所以有很多这样的内容。


“所有 UA 都会忽略版本属性,因此您可以随时删除它。” - 但是规范对此事有什么看法? “浏览器会让你侥幸逃脱”对于许多(或曾经)明确不正确的做法而言(或在某些时候已经)是正确的。
在 IE11 中,如果我放 <!DOCTYPE svg xmlns="www.w3.org/2000/svg"> 它可以工作,但如果我删除 xmlns 或将其更改为 <!DOCTYPE svg xmlns="www.example.com"> 它就不起作用。这是为什么?
@RobertLongson:当您说“xmlns 属性”时,是否包括 xmlns:xlink?
当使用 data-uri 时,“在 HTML 文档中嵌入 SVG”部分是否也适用于 css 文件?
@Marcel 不是,如果这些数据uris 是 image/svg+xml,通常是这种情况,那么答案的最后一部分成立。
j
jamess

我想添加两个答案,但我没有积分,我正在添加一个新答案。在最近对 Chrome(版本 63.0.3239.132(官方构建)(64 位 Windows))的测试中,我发现:

对于通过文本编辑器或javascript和elm.innerHTML直接输入HTML文件的内联SVG,xmlns属性不是必需的,如其他两个答案中所述。但是对于通过 javascript 和 AJAX 加载的内联 SVG,有两个选项:使用 xhr.responseText 和 elm.innerHTML。这不需要 xmlns。使用 xhr.responseXML.documentElement 和 elm.appendChild() 或 elm.insertBefore()。这种创建内联 SVG 的方法在没有声明基本 SVG 命名空间的情况下产生半生不熟的结果,如 xmlns="http://www.w3.org/2000/svg" 中。 加载到 HTML 中,但在 元素上无法识别文档级函数,例如 getElementById()。我认为这是因为它在 HTML 之外使用 XMLHttpRequest XML 解析器。


V
Velusamy Velu

关于 SVG 版本属性,MDN WebDoc

自 SVG 2 起已弃用此功能不再推荐。尽管某些浏览器可能仍然支持它,但它可能已经从相关的 Web 标准中删除,可能正在被删除,或者可能仅出于兼容性目的而保留。避免使用它,并尽可能更新现有代码;请参阅本页底部的兼容性表以指导您的决定。请注意,此功能可能随时停止工作。 version 属性用于指示 SVG 文档符合什么规范。它只允许在根元素上。它纯粹是建议性的,对渲染或处理没有影响。

PS:SVG 2 远未成为标准。


注意:以上仅适用于“版本”属性,而不适用于“xmlns” xmlns 是 XML(不是 SVG)功能,因此在 HTML5 中(当不用作 XML/XHTML 时)它不相关或不需要,但在 SVG 中嵌入出于任何原因在 XML 中

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅