为什么 HTML 锚标记不包装可缩放的 SVG <object>? [英] Why doesn't an HTML anchor tag wrap a scalable SVG <object>?
问题描述
我使用 SVG 文件本身中的 preserveAspectRatio 和 viewBox 属性创建了一个可缩放的 SVG 对象:
在 HTML 中，我使用 标记引用 SVG 文件并将其包装为 :内容模型:透明，但不能有交互式内容后代."
I have created a scalable SVG object, using the preserveAspectRatio and viewBox attributes in the SVG file itself:
<svg
…
width="800"
height="800"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 800 800"
…
In the HTML, I reference the SVG file using the <object> tag and wrap it an <a> tag (I want to do this so that I can style it later):
<a>
<object type="image/svg+xml" data="smiley.svg">
</object>
</a>
I style the <object> tag with some CSS to make it 50% wide, and no wider than 100%:
object {
max-width: 100%;
width: 50%;
}
The problem is that the anchor tag doesn't wrap all around the object!
Any ideas anyone?
I think @CBroe has it: SVG can be interactive content, therefore it shouldn't be wrapped by anchor element:
w3.org/TR/html5/text-level-semantics.html#the-a-element: "Content model: Transparent, but there must be no interactive content descendant."
这篇关于为什么 HTML 锚标记不包装可缩放的 SVG <object>?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
