如何实现SVG'；s和HTML'；foreignObject、img和svg元素上的宽度/高度属性相关吗？_Html_Svg

如何实现SVG'；s和HTML'；foreignObject、img和svg元素上的宽度/高度属性相关吗？

html svg

如何实现SVG'；s和HTML'；foreignObject、img和svg元素上的宽度/高度属性相关吗？,html,svg,Html,Svg,我在foreignObject元素中有一个带有HTML的SVG。与往常一样，此SVG将包含在带有img元素的网页上所有这些高度和宽度属性如何关联？可以在以下位置设置（或不设置）：网页的img元素 svg图像文件中的svg根元素 SVG图像文件中SVG根元素下的foreignObject元素网站中嵌入img的图像的外部尺寸：如果img带有高度和宽度属性，则它们确定外部尺寸，就像普通位图一样如果img对大小没有限制，则会参考SVG文件以确定其大小，就像普通位图一样如果SVG根元素

我在

foreignObject

元素中有一个带有HTML的SVG。与往常一样，此SVG将包含在带有

img

元素的网页上

所有这些
高度
和
宽度
属性如何关联？可以在以下位置设置（或不设置）：

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

网站中嵌入
```
img
```
的图像的外部尺寸：
- 如果
```
img
```
  带有高度和宽度属性，则它们确定外部尺寸，就像普通位图一样
- 如果
```
img
```
  对大小没有限制，则会参考SVG文件以确定其大小，就像普通位图一样
  - 如果SVG根元素具有绝对高度和宽度，则表示SVG的大小
- 如果
```
svg
```
  根元素的高度和宽度为100%（即相对）或根本未设置，则浏览器将其设置为300x150
网页中SVG的缩放：
- 如果SVG（通过根元素中的绝对高度/宽度）的大小与网页中的
```
img
```
  不同，则SVG会被缩放，就像位图一样
- 如果SVG没有绝对尺寸，则不会缩放SVG，但如果无法在分配的空间中渲染SVG，则会对其进行剪裁
以及
```
外来对象
```
？
- 宽度和高度是必需的属性
- 与
```
svg
```
  元素不同，
```
foreignObject
```
  在默认情况下不能获得100%的宽度和高度
- 但%单位可以“手动”指定
- 如果SVG中的HTML应该完全填充图像，请指定100%的高度/宽度