视频未显示在 svg 中，我正在使用 foreignObject。但是当我向它添加 autoplay 标签时，它确实会自动播放，但我确实听到了音频但没有视频。这里有什么问题？
这是视频部分：
...
<rect
width="510.757"
height="316.027"
transform="translate(427.919 928.655)"
fill="url(#k)"
>
<foreignObject
x="427.919"
y="928.655"
width="510.76"
height="316.3"
>
<video
controls
width="510.76"
height="316.3"
className="media-area-video img-fluid"
>
<source
src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm"
type="video/webm"
/>
</video>
</foreignObject>
</rect>
...
svg 的全部内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="663.221"
height="376.367"
className="img-fluid"
viewBox="0 0 663.221 376.367"
>
<defs>
<linearGradient
id="a"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#9a9a9a" />
<stop offset="0.09" stop-color="#a2a2a2" />
<stop offset="0.24" stop-color="#b8b8b8" />
<stop offset="0.42" stop-color="#dbdbdb" />
<stop offset="0.45" stop-color="#e2e2e2" />
<stop offset="1" stop-color="#c5c5c5" />
</linearGradient>
<linearGradient
id="b"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#404040" />
<stop offset="0.28" stop-color="#434343" />
<stop offset="0.45" stop-color="#4b4b4b" />
<stop offset="0.59" stop-color="#595959" />
<stop offset="0.71" stop-color="#6d6d6d" />
<stop offset="0.82" stop-color="#888" />
<stop offset="0.92" stop-color="#a7a7a7" />
<stop offset="1" stop-color="#c5c5c5" />
</linearGradient>
<linearGradient
id="c"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#929292" />
<stop offset="0.01" stop-color="#c1c1c1" />
<stop offset="0.03" stop-color="#b2b2b2" />
<stop offset="0.05" stop-color="#9c9c9c" />
<stop offset="0.07" stop-color="#a4a4a4" />
<stop offset="0.09" stop-color="#afafaf" />
<stop offset="1" stop-color="#cfcfcf" />
</linearGradient>
<linearGradient
id="d"
y1="0.508"
x2="1"
y2="0.508"
gradientUnits="objectBoundingBox"
>
<stop offset="0.01" stop-color="#f8f8f8" />
<stop offset="0.06" stop-color="#d0d0d0" />
<stop offset="0.5" stop-color="#f8f8f8" />
<stop offset="0.87" stop-color="#d0d0d0" />
<stop offset="0.88" stop-color="#d3d3d3" />
<stop offset="0.95" stop-color="#e9e9e9" />
<stop offset="1" stop-color="#f1f1f1" />
</linearGradient>
<linearGradient
id="e"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#cfcfcf" />
<stop offset="0.91" stop-color="#afafaf" />
<stop offset="0.93" stop-color="#a4a4a4" />
<stop offset="0.95" stop-color="#9c9c9c" />
<stop offset="0.97" stop-color="#b2b2b2" />
<stop offset="0.99" stop-color="#c1c1c1" />
<stop offset="1" stop-color="#929292" />
</linearGradient>
<linearGradient
id="f"
y1="0.501"
x2="1"
y2="0.501"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#666" />
<stop offset="0.01" stop-color="#d5d5d5" />
<stop offset="0.02" stop-color="#bdbdbd" />
<stop offset="0.04" stop-color="#868686" />
<stop offset="0.05" stop-color="#707070" />
<stop offset="0.06" stop-color="#787878" />
<stop offset="0.07" stop-color="#8e8e8e" />
<stop offset="0.09" stop-color="#b2b2b2" />
<stop offset="0.09" stop-color="#bcbcbc" />
<stop offset="1" stop-color="#f1f1f1" />
</linearGradient>
<linearGradient
id="g"
y1="0.501"
x2="1"
y2="0.501"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f1f1f1" />
<stop offset="0.91" stop-color="#bcbcbc" />
<stop offset="0.91" stop-color="#b2b2b2" />
<stop offset="0.93" stop-color="#8e8e8e" />
<stop offset="0.94" stop-color="#787878" />
<stop offset="0.95" stop-color="#707070" />
<stop offset="0.96" stop-color="#868686" />
<stop offset="0.98" stop-color="#bdbdbd" />
<stop offset="0.99" stop-color="#d5d5d5" />
<stop offset="1" stop-color="#666" />
</linearGradient>
<linearGradient
id="h"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#9f9f9f" />
<stop offset="0.04" stop-color="#acacac" />
<stop offset="0.51" stop-color="#e5e5e5" />
<stop offset="0.96" stop-color="#acacac" />
<stop offset="1" stop-color="#9f9f9f" />
</linearGradient>
<linearGradient
id="i"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f7f7f7" />
<stop offset="0.52" stop-color="#f8f8f8" />
<stop offset="1" stop-color="#f7f7f7" />
</linearGradient>
<linearGradient
id="j"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#575757" />
<stop offset="0.74" stop-color="#b9b9b9" />
<stop offset="0.85" stop-color="#b6b6b6" />
<stop offset="0.94" stop-color="#acacac" />
<stop offset="1" stop-color="#9f9f9f" />
</linearGradient>
<linearGradient
id="k"
x1="0.095"
y1="-0.154"
x2="0.905"
y2="1.154"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f2f3f4" />
<stop offset="0.36" stop-color="#edeeef" />
<stop offset="0.78" stop-color="#dfe0e0" />
<stop offset="1" stop-color="#d5d6d6" />
</linearGradient>
</defs>
<g transform="translate(-349 -906.187)">
<path
d="M695.419,267.93H190.624a16.269,16.269,0,0,0-16.334,16.155V621.739h2.344V281.773a13.725,13.725,0,0,1,.155-2.1,3.809,3.809,0,0,1,.122-.678,6.664,6.664,0,0,1,.163-.67c.065-.221.114-.441.188-.653a13.721,13.721,0,0,1,2.785-4.9,6.528,6.528,0,0,1,.457-.49l.229-.237a14.154,14.154,0,0,1,2.36-1.87c.286-.18.572-.351.874-.515s.6-.3.907-.441h0l.629-.253h0a14.268,14.268,0,0,1,5.129-.956H695.386a14.1,14.1,0,0,1,6.672,1.634c.294.163.588.335.874.514s.743.5,1.095.768h0l.514.425h0c.253.22.5.441.735.678l.237.237c.155.155.31.319.457.49a13.647,13.647,0,0,1,3.414,9.033V621.739h2.377V283.072A16.286,16.286,0,0,0,695.419,267.93Z"
transform="translate(240.308 640.569)"
fill="url(#a)"
/>
<path
d="M174.2,281.254A16.269,16.269,0,0,1,190.575,265.1H695.37a16.269,16.269,0,0,1,16.383,16.155v1.3a16.285,16.285,0,0,0-16.334-15.142h-504.8a16.269,16.269,0,0,0-16.383,16.155Z"
transform="translate(240.325 641.087)"
fill="url(#b)"
/>
<rect
width="532.808"
height="9.458"
transform="translate(416.893 1252.858)"
/>
<path
d="M709.908,281.884V612.3H177.1V281.884A13.966,13.966,0,0,1,191.107,268H695.9a13.966,13.966,0,0,1,14.007,13.884Z"
transform="translate(239.793 640.556)"
/>
<path
d="M617.78,436.04v.866H80.26v-.866Z"
transform="translate(334.29 826.268)"
/>
<rect
width="331.61"
height="10.037"
transform="translate(349 1263.671)"
fill="url(#c)"
/>
<rect
width="663.212"
height="0.498"
transform="translate(349 1263.173)"
fill="url(#d)"
/>
<rect
width="331.61"
height="10.037"
transform="translate(680.61 1263.671)"
fill="url(#e)"
/>
<rect
width="331.61"
height="9.441"
transform="translate(349 1263.671)"
fill="url(#f)"
/>
<rect
width="331.61"
height="9.441"
transform="translate(680.61 1263.671)"
fill="url(#g)"
/>
<path
d="M536.606,702.2a7.694,7.694,0,0,1-7.685,7.694H449.887a7.685,7.685,0,0,1-7.677-7.694Z"
transform="translate(191.203 560.973)"
fill="url(#h)"
/>
<g transform="translate(633.037 1263.173)">
<path
d="M536.53,702.2a7.693,7.693,0,0,1-7.693,7.694H449.811a7.685,7.685,0,0,1-7.685-7.694h-.376v.58a7.685,7.685,0,0,0,7.685,7.677h79.777a7.677,7.677,0,0,0,7.685-7.677v-.58Z"
transform="translate(-441.75 -702.2)"
fill="url(#i)"
/>
</g>
<path
d="M94,715.1a295.949,295.949,0,0,0,72.034,8.845H685.162a295.959,295.959,0,0,0,72.01-8.845Z"
transform="translate(255.025 558.609)"
fill="url(#j)"
/>
<rect
width="510.757"
height="316.027"
transform="translate(427.919 928.655)"
fill="url(#k)"
>
<foreignObject
x="427.919"
y="928.655"
width="510.76"
height="316.3"
>
<video
controls
width="510.76"
height="316.3"
className="media-area-video img-fluid"
>
<source
src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm"
type="video/webm"
/>
</video>
</foreignObject>
</rect>
</g>
</svg>
</body>
</html>svg 必须放在笔记本电脑 svg 的显示器上。
编辑： github 存储库链接：https://github.com/amir-mln/so-svg
答案 0 :(得分：2)
问题是 <foreignObject> 元素在 <rect> 中的嵌套。
解决方案是在 rect 周围创建一个新组 (<g>)，并使 foreignObject 成为 rect 的兄弟，而不是 rect 的子级。该组应具有 transform 的 <rect> 值。
然后将 x 的 y 和 foreignObject 属性设置为 0。
<g transform="translate(427.919 928.655)">
<rect
width="510.757"
height="316.027"
fill="url(#k)"
/>
<foreignObject
x="0"
y="0"
width="510.76"
height="316.3"
>
<video>
...
</video>
</foreignObject>
</g>
看看它的实际效果：
.media-area-video {
position: relative;
z-index: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="663.221"
height="376.367"
className="img-fluid"
viewBox="0 0 663.221 376.367"
>
<defs>
<linearGradient
id="a"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#9a9a9a" />
<stop offset="0.09" stop-color="#a2a2a2" />
<stop offset="0.24" stop-color="#b8b8b8" />
<stop offset="0.42" stop-color="#dbdbdb" />
<stop offset="0.45" stop-color="#e2e2e2" />
<stop offset="1" stop-color="#c5c5c5" />
</linearGradient>
<linearGradient
id="b"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#404040" />
<stop offset="0.28" stop-color="#434343" />
<stop offset="0.45" stop-color="#4b4b4b" />
<stop offset="0.59" stop-color="#595959" />
<stop offset="0.71" stop-color="#6d6d6d" />
<stop offset="0.82" stop-color="#888" />
<stop offset="0.92" stop-color="#a7a7a7" />
<stop offset="1" stop-color="#c5c5c5" />
</linearGradient>
<linearGradient
id="c"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#929292" />
<stop offset="0.01" stop-color="#c1c1c1" />
<stop offset="0.03" stop-color="#b2b2b2" />
<stop offset="0.05" stop-color="#9c9c9c" />
<stop offset="0.07" stop-color="#a4a4a4" />
<stop offset="0.09" stop-color="#afafaf" />
<stop offset="1" stop-color="#cfcfcf" />
</linearGradient>
<linearGradient
id="d"
y1="0.508"
x2="1"
y2="0.508"
gradientUnits="objectBoundingBox"
>
<stop offset="0.01" stop-color="#f8f8f8" />
<stop offset="0.06" stop-color="#d0d0d0" />
<stop offset="0.5" stop-color="#f8f8f8" />
<stop offset="0.87" stop-color="#d0d0d0" />
<stop offset="0.88" stop-color="#d3d3d3" />
<stop offset="0.95" stop-color="#e9e9e9" />
<stop offset="1" stop-color="#f1f1f1" />
</linearGradient>
<linearGradient
id="e"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#cfcfcf" />
<stop offset="0.91" stop-color="#afafaf" />
<stop offset="0.93" stop-color="#a4a4a4" />
<stop offset="0.95" stop-color="#9c9c9c" />
<stop offset="0.97" stop-color="#b2b2b2" />
<stop offset="0.99" stop-color="#c1c1c1" />
<stop offset="1" stop-color="#929292" />
</linearGradient>
<linearGradient
id="f"
y1="0.501"
x2="1"
y2="0.501"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#666" />
<stop offset="0.01" stop-color="#d5d5d5" />
<stop offset="0.02" stop-color="#bdbdbd" />
<stop offset="0.04" stop-color="#868686" />
<stop offset="0.05" stop-color="#707070" />
<stop offset="0.06" stop-color="#787878" />
<stop offset="0.07" stop-color="#8e8e8e" />
<stop offset="0.09" stop-color="#b2b2b2" />
<stop offset="0.09" stop-color="#bcbcbc" />
<stop offset="1" stop-color="#f1f1f1" />
</linearGradient>
<linearGradient
id="g"
y1="0.501"
x2="1"
y2="0.501"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f1f1f1" />
<stop offset="0.91" stop-color="#bcbcbc" />
<stop offset="0.91" stop-color="#b2b2b2" />
<stop offset="0.93" stop-color="#8e8e8e" />
<stop offset="0.94" stop-color="#787878" />
<stop offset="0.95" stop-color="#707070" />
<stop offset="0.96" stop-color="#868686" />
<stop offset="0.98" stop-color="#bdbdbd" />
<stop offset="0.99" stop-color="#d5d5d5" />
<stop offset="1" stop-color="#666" />
</linearGradient>
<linearGradient
id="h"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#9f9f9f" />
<stop offset="0.04" stop-color="#acacac" />
<stop offset="0.51" stop-color="#e5e5e5" />
<stop offset="0.96" stop-color="#acacac" />
<stop offset="1" stop-color="#9f9f9f" />
</linearGradient>
<linearGradient
id="i"
y1="0.5"
x2="1"
y2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f7f7f7" />
<stop offset="0.52" stop-color="#f8f8f8" />
<stop offset="1" stop-color="#f7f7f7" />
</linearGradient>
<linearGradient
id="j"
x1="0.5"
y1="1"
x2="0.5"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#575757" />
<stop offset="0.74" stop-color="#b9b9b9" />
<stop offset="0.85" stop-color="#b6b6b6" />
<stop offset="0.94" stop-color="#acacac" />
<stop offset="1" stop-color="#9f9f9f" />
</linearGradient>
<linearGradient
id="k"
x1="0.095"
y1="-0.154"
x2="0.905"
y2="1.154"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f2f3f4" />
<stop offset="0.36" stop-color="#edeeef" />
<stop offset="0.78" stop-color="#dfe0e0" />
<stop offset="1" stop-color="#d5d6d6" />
</linearGradient>
</defs>
<g transform="translate(-349 -906.187)">
<path
d="M695.419,267.93H190.624a16.269,16.269,0,0,0-16.334,16.155V621.739h2.344V281.773a13.725,13.725,0,0,1,.155-2.1,3.809,3.809,0,0,1,.122-.678,6.664,6.664,0,0,1,.163-.67c.065-.221.114-.441.188-.653a13.721,13.721,0,0,1,2.785-4.9,6.528,6.528,0,0,1,.457-.49l.229-.237a14.154,14.154,0,0,1,2.36-1.87c.286-.18.572-.351.874-.515s.6-.3.907-.441h0l.629-.253h0a14.268,14.268,0,0,1,5.129-.956H695.386a14.1,14.1,0,0,1,6.672,1.634c.294.163.588.335.874.514s.743.5,1.095.768h0l.514.425h0c.253.22.5.441.735.678l.237.237c.155.155.31.319.457.49a13.647,13.647,0,0,1,3.414,9.033V621.739h2.377V283.072A16.286,16.286,0,0,0,695.419,267.93Z"
transform="translate(240.308 640.569)"
fill="url(#a)"
/>
<path
d="M174.2,281.254A16.269,16.269,0,0,1,190.575,265.1H695.37a16.269,16.269,0,0,1,16.383,16.155v1.3a16.285,16.285,0,0,0-16.334-15.142h-504.8a16.269,16.269,0,0,0-16.383,16.155Z"
transform="translate(240.325 641.087)"
fill="url(#b)"
/>
<rect
width="532.808"
height="9.458"
transform="translate(416.893 1252.858)"
/>
<path
d="M709.908,281.884V612.3H177.1V281.884A13.966,13.966,0,0,1,191.107,268H695.9a13.966,13.966,0,0,1,14.007,13.884Z"
transform="translate(239.793 640.556)"
/>
<path
d="M617.78,436.04v.866H80.26v-.866Z"
transform="translate(334.29 826.268)"
/>
<rect
width="331.61"
height="10.037"
transform="translate(349 1263.671)"
fill="url(#c)"
/>
<rect
width="663.212"
height="0.498"
transform="translate(349 1263.173)"
fill="url(#d)"
/>
<rect
width="331.61"
height="10.037"
transform="translate(680.61 1263.671)"
fill="url(#e)"
/>
<rect
width="331.61"
height="9.441"
transform="translate(349 1263.671)"
fill="url(#f)"
/>
<rect
width="331.61"
height="9.441"
transform="translate(680.61 1263.671)"
fill="url(#g)"
/>
<path
d="M536.606,702.2a7.694,7.694,0,0,1-7.685,7.694H449.887a7.685,7.685,0,0,1-7.677-7.694Z"
transform="translate(191.203 560.973)"
fill="url(#h)"
/>
<g transform="translate(633.037 1263.173)">
<path
d="M536.53,702.2a7.693,7.693,0,0,1-7.693,7.694H449.811a7.685,7.685,0,0,1-7.685-7.694h-.376v.58a7.685,7.685,0,0,0,7.685,7.677h79.777a7.677,7.677,0,0,0,7.685-7.677v-.58Z"
transform="translate(-441.75 -702.2)"
fill="url(#i)"
/>
</g>
<path
d="M94,715.1a295.949,295.949,0,0,0,72.034,8.845H685.162a295.959,295.959,0,0,0,72.01-8.845Z"
transform="translate(255.025 558.609)"
fill="url(#j)"
/>
<g transform="translate(427.919 928.655)">
<rect
width="510.757"
height="316.027"
fill="url(#k)"
/>
<foreignObject
x="0"
y="0"
width="510.76"
height="316.3"
>
<video
controls
width="510.76"
height="316.3"
class="media-area-video img-fluid"
>
<source
src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm"
type="video/webm"
/>
</video>
</foreignObject>
</g>
</g>
</svg>
</body>
</html>