外部对象，img和svg元素上的SVG＆HTML和HTML的宽度/高度属性如何相关？

Question

我在foreignObject元素中有一个带有HTML的SVG。与往常一样，此SVG将包含在具有img元素的网页中。

所有height和width属性如何相关？可以设置（或不设置）它们：

• 网页的img元素
• SVG图像文件中的svg根元素
• foreignObject根元素
下SVG图像文件中的svg元素

Answer 1

• 网站中图片的外部尺寸，其中嵌入了img：
  • 如果img带有高度和宽度属性，它们会确定外部尺寸，就像使用普通位图一样
  • 如果img对大小没有限制，则会查询SVG文件的大小，就像使用普通位图一样
    • 如果SVG根元素具有绝对高度和宽度，即SVG的大小
  • 如果svg根元素的高度和宽度为100％（即相对）或根本未设置，则浏览器将其设置为300x150
• 在网页中缩放SVG：
  • 如果SVG（通过根元素中的绝对高度/宽度）的大小不同于网页中img的大小，则SVG 缩放，就像位图一样< / LI>
  • 如果SVG没有绝对尺寸，则SVG 不缩放，但剪裁如果无法在分配的空间中渲染
• 和foreignObject？
  • 宽度和高度是必需属性
  • 与svg元素不同，foreignObject默认情况下不会获得100％的宽度和高度
  • 但可以指定％-units＆＃34;手动＆＃34;
  • 如果SVG中的HTML应完全填充图像，请指定100％高度/宽度