我試圖讓我的視頻適合我的svg路徑。但是現在它是錯位的，它在svg的前面，而不是在里面。
在Android桌面電腦上，視頻完全適合svg文件。這似乎只是和iOS的問題。我知道-web-kit-clippath會有所幫助，我也用過，但還是沒用。
有人知道這是為什么嗎？
下面是有問題的代碼。如你所見，它可以在桌面瀏覽器上正常運行。同樣，在iOS上也有這個問題。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="0 0 2150.16 1945.25">
<defs>
<clipPath id="myClipPath">
<path class="cls-6" id="cls-6"
d="M1218.42,609.92c0,21.1-21.36,38.21-47.71,38.21H342.97c-26.35,0-47.71-17.11-47.71-38.21V164.53c0-21.1,21.36-38.21,47.71-38.21h827.74c26.35,0,47.71,17.11,47.71,38.21v445.39Z" />
</clipPath>
<style>
div {
-webkit-clip-path:url(#cls-6);
overflow: hidden;
}
video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
foreignObject{
-webkit-clip-path:url(#cls-6);
<!-- clip-path: url(#path); -->
}
g {
position: relative;
}
.cls-1,
.cls-2,
.cls-3 {
background-image: url("img\Arrow-next-purple.svg");
fill: none;
}
.cls-4 {
clip-path: url(#clippath);
}
.cls-5 {
fill: #e8f4fa;
}
/* the video path */
.cls-6 {
clip-path: url(#clippath);
}
.cls-7 {
fill: #ffcf35;
}
.cls-8 {
fill: #6aa3cd;
}
.cls-9 {
fill: #83287e;
}
.cls-10 {
fill: #a0cde7;
}
.cls-11 {
fill: #bb8a55;
}
.cls-12 {
fill: #a8cbe3;
}
.cls-13 {
fill: #d0e4ef;
}
.cls-14 {
fill: #d4a163;
}
.cls-15 {
fill: #170f0d;
}
.cls-16 {
fill: #9b6e42;
}
/* sam's hair .cls-1 */
.cls-17 {
fill: #2d1311;
}
.cls-18 {
fill: #582815;
}
.cls-19 {
fill: #74a9d5;
}
.cls-20 {
fill: #7b4b2a;
}
.cls-2 {
stroke: #16ace3;
stroke-width: 13.85px;
}
.cls-2,
.cls-3 {
stroke-miterlimit: 10;
}
.cls-21 {
clip-path: url(#clippath-2);
}
.cls-3 {
stroke: #211c13;
stroke-width: 3.31px;
}
.cls-22 {
isolation: isolate;
}
.cls-23 {
mix-blend-mode: multiply;
opacity: .15;
}
rect{
position: absolute;
background-image: url("img\Arrow-next-purple.svg");
}
</style>
<clipPath id="clippath">
<!-- <rect image="img\Arrow-next-purple.svg" class="cls-3" x="59.65" y="21.8" width="1920" height="1080" /> -->
<rect class="cls-3" x="59.65" y="21.8" width="1920" height="1080" />
</clipPath>
<clipPath id="clippath-2">
<path class="cls-1"
d="M1975.65,798.45c-56.59-48.63-100.44-58.89-130.55-58.87-10.57,0-20.43,1.29-51.81,2.48-37.36,1.42-67.82,1.29-87.84,.96-18.51,6.97-57.08,19.08-91.39,19.74-87.22,1.7-117.51,332.96-112.64,472.18,146.36,47.12,288.1,38.12,459.62-26.14l14.6-410.36Z" />
</clipPath>
</defs>
<g class="cls-22">
<g id="Layer_2">
<g id="Backgrounds">
<g id="Sam___Screen">
<g class="cls-4">
<path class="cls-8"
d="M912.46,657.06c4.87,33.05,23.73,69.93,61.92,68.13,7.98-.29,15.64-2.02,23.31-4.52,21.05-6.7,42.75-11.39,64.74-13.57,33.76-2.98,72.83-2.23,101.88,16.9,7.95,5.38,14.87,14.32,13.35,24.41-.41,3.21-1.5,6.28-2.92,9.15,2.64-5.75,3.63-12.54,1.17-18.49-6.95-16.31-32-23.38-48.07-26.33-42.84-7.61-87.43-.16-128.34,13.42-21.81,8.01-46.76,8.18-65.23-7.97-17.48-15.34-26.16-37.78-30.05-60.11-.58-5.56,7.45-6.58,8.25-1.02h0Z" />
<g>
<g id="Desk">
<path class="cls-14"
d="M1458.37,1143.83h16.9c1.73,0,3.13,1.4,3.13,3.13v723.57h-23.17v-723.57c0-1.73,1.4-3.13,3.13-3.13Z"
transform="translate(2933.63 3014.37) rotate(-180)" />
<path class="cls-16"
d="M345.57,1149.53h16.9c1.73,0,3.13,1.4,3.13,3.13v717.87h-23.17v-717.87c0-1.73,1.4-3.13,3.13-3.13Z"
transform="translate(708.05 3020.07) rotate(-180)" />
<g>
<path class="cls-14"
d="M171.36,1088.73h28.42v852.68c0,2.12-1.72,3.84-3.84,3.84h-20.73c-2.12,0-3.84-1.72-3.84-3.84v-852.68h0Z" />
<path class="cls-16"
d="M1321.71,1143.83h16.9c1.73,0,3.13,1.4,3.13,3.13v723.57h-23.17v-723.57c0-1.73,1.4-3.13,3.13-3.13Z"
transform="translate(2660.31 3014.37) rotate(-180)" />
<polygon class="cls-14"
points="1682.75 1103.83 0 1103.83 89.36 794.28 1551.73 794.28 1682.75 1103.83" />
<rect class="cls-11" x="0" y="1103.69" width="1682.75" height="51.99" />
</g>
</g>
<g>
<polygon class="cls-5"
points="1141.76 1024 354.53 1024 423.35 898.77 1072.94 898.77 1141.76 1024" />
<polygon class="cls-10"
points="1110.49 1012.2 389.63 1012.2 441.35 910.56 1058.77 910.56 1110.49 1012.2" />
<polygon class="cls-13"
points="1070.81 977.94 426.87 977.94 453.4 924.56 1046.54 924.56 1070.81 977.94" />
<polygon class="cls-13"
points="929.85 1001.66 525.94 1001.66 529.95 987.81 922.81 987.81 929.85 1001.66" />
<polygon class="cls-13"
points="1083.45 1001.66 939.12 1001.66 931.52 987.81 1080.94 987.81 1083.45 1001.66" />
<polygon class="cls-13"
points="516.91 1001.66 417.51 1001.66 418.49 987.81 519.7 987.81 516.91 1001.66" />
</g>
<!-- screen -->
<g>
<path class="cls-10"
d="M836.57,512.83l-167.53-.9-44.16,353.82h252.8l-41.12-352.92Zm-154.8,163.76l4.79-32.72h130.89l4.79,32.72h-140.48Z" />
<g >
<path class="cls-13"
d="M1294.34,703.75c0,27.04-25.13,48.96-56.13,48.96H264.37c-31,0-56.13-21.92-56.13-48.96V75.22c0-27.04,25.13-48.96,56.13-48.96h973.83c31,0,56.13,21.92,56.13,48.95V703.75Z" />
<path class="cls-6"
d="M1218.42,609.92c0,21.1-21.36,38.21-47.71,38.21H342.97c-26.35,0-47.71-17.11-47.71-38.21V166.79c0-21.1,21.36-38.21,47.71-38.21h827.74c26.35,0,47.71,17.11,47.71,38.21v443.13Z" />
<path class="cls-6"
d="M1218.42,609.92c0,21.1-21.36,38.21-47.71,38.21H342.97c-26.35,0-47.71-17.11-47.71-38.21V164.53c0-21.1,21.36-38.21,47.71-38.21h827.74c26.35,0,47.71,17.11,47.71,38.21v445.39Z" />
<g clip-path="url(#myClipPath)">
<foreignObject width="927.74" height="595.39" x="290" y="110">
<!-- x and y is the positioning -->
<div>
<video xmlns="http://www.w3.org/1999/xhtml" width="320"
height="180" autoplay loop muted playsinline>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
</video>
</div>
</foreignObject>
</g>
</g>
</g>
<g id="Sam">
<g>
<path class="cls-5"
d="M1299.78,889.76c-8.73-14.14-34.22-44.71-77.67-12.34-5.22,3.89-8.42,9.92-8.49,16.43-.23,21.81,1.23,72.8,19.81,72.89,22.99,.11,63.51,9.49,69.37-64.2,.36-4.48-.66-8.95-3.02-12.77Z" />
<path class="cls-12"
d="M1261.76,863.21c.63,16.89-.46,33.67-2,50.44-1.67,16.77-3.79,33.44-7.64,49.9-.64-16.89,.45-33.67,2-50.44,1.68-16.76,3.8-33.44,7.64-49.9h0Z" />
</g>
<g>
<path class="cls-20"
d="M1406.38,1190.22l65.13-1.87,62.28-184.81-90.29-25.43c-20.4,58.29-37.57,146.72-37.12,212.12Z" />
<g>
<path class="cls-20"
d="M1193.98,948.58c-9.8,15.47,13.91,32.06,23.94,41.62,7.65,7.32,16.49,13.77,25.79,19.8,6.48,4.19,12.86,7.37,19.78,10.23,17.59,89.45,101.42,180.05,101.42,180.05l108.19-59.56s-90.34-4.35-162.27-129.55c.13-.19,.22-.4,.27-.58,.24-.1,.45-.26,.55-.51,2.63-7.78,6.49-15.21,7.44-23.12,.81-6.74-1.99-12.87-5.4-18.59-5.11-8.53-10.58-16.26-13.71-25.63-1.79-5.43-2.91-11.07-3.79-16.7-.4-2.42,.05-6.1-1.7-8.22-4.92-5.86-17.42,.69-20.42,6.03-3.21,5.62-2.07,10.68,.02,16.03,2.25,5.77,4.83,11.22,6.91,16.91-3.12-3.93-7.06-7.36-11.21-10.75-9.06-7.37-14.58-15.12-20.68-24.18-5.96-8.83-10.72-18.02-16.24-27.01-3.02-4.88-8.69-9.87-16.22-10.11-4.89-.15-6.96,5.37-7.04,8.11-.04,1.8,.17,3.51,.51,5.2-9.13,2.06-9.51,12.93-8.44,21.18-8.64,2.35-10.84,14.64-10.08,21.34-.03,.01-.08,.04-.1,.04,.03,.98,2.11,6.52,2.67,7.81-.06,.06-.13,.12-.16,.19Z" />
<g>
<path class="cls-18"
d="M1210.1,898.02c8.68,13.96,16.91,29.98,25.22,44.16-5.7-6.35-10.15-13.7-14.34-21.09-4.1-7.46-7.89-15.08-10.88-23.06h0Z" />
<path class="cls-18"
d="M1201.65,919.2c5.36,10.76,9.6,22.2,17.55,31.39-9.57-6.24-15.45-20.5-17.55-31.39h0Z" />
<path class="cls-18"
d="M1194.15,948.39c7.72,8.58,15.3,18.64,22.79,27.47-5.02-3.34-9.16-7.81-12.97-12.43-3.73-4.7-7.17-9.63-9.82-15.03h0Z" />
</g>
</g>
<path class="cls-20" d="M1360.42,1196.03s94.1,116.86,116.29-32.17l-78.96-18.43" />
<path class="cls-18"
d="M1396.4,1195.46c-2.76-21.9,1.92-47.75,11.56-67.57,1.11-2.12,2.26-4.23,3.49-6.28-2.41,9.21-4.9,18.22-6.9,27.46-3.38,15.37-5.83,30.78-8.15,46.39h0Z" />
</g>
<g>
<path class="cls-7"
d="M1413.45,1021.12l174.47,29.42s35.2-287.58,23.83-288.59c-50.53-4.5-188.56,90.44-198.3,259.17Z" />
<g>
<g>
<path class="cls-9"
d="M1527.01,1797.99l15.54,73.64c2.2,13.1,12.74,24.02,27.2,28.07,29.09,8.15,80.28,18.21,127.34,6.01,13.12-3.4,23.07-12.75,26.37-24.35l25.22-75.19-221.68-8.17Z" />
<path class="cls-9"
d="M1776.87,1791.05l15.69,73.61c2.22,13.1,12.79,24,27.26,28.02,29.11,8.09,80.32,18.05,127.35,5.76,13.11-3.43,23.05-12.79,26.32-24.4l25.08-75.24-221.7-7.74Z" />
<path class="cls-19"
d="M1759.81,1197.52l2.97,608.95s-127.67,72.31-273.41-18.86l21.54-582.16s-14.78,20.08,248.89-7.93Z" />
<path class="cls-19"
d="M1943.42,1188.67l87.56,602.63s-116.38,89.35-273.38,19.32l-59.56-579.5s-11.85,21.94,245.37-42.44Z" />
<g class="cls-23">
<path class="cls-15"
d="M1728.57,1399.72c13.59,136.09,23.39,274.24,29.03,410.89-13.63-136.08-23.36-274.24-29.03-410.89h0Z" />
</g>
</g>
<g class="cls-21">
<path class="cls-7"
d="M1975.65,798.45c-56.59-48.63-100.44-58.89-130.55-58.87-10.57,0-20.43,1.29-51.81,2.48-37.36,1.42-67.82,1.29-87.84,.96-18.51,6.97-57.08,19.08-91.39,19.74-87.22,1.7-117.51,332.96-112.64,472.18,146.36,47.12,288.1,38.12,459.62-26.14l14.6-410.36Z" />
<path class="cls-2" d="M1992.6,1155.75s-376.68,132.22-520.77,6.89" />
</g>
</g>
<g>
<g>
<path class="cls-20"
d="M2096.22,1384.77c13.81-16.36-4.24-45-11.15-60.32-5.26-11.73-11.91-22.74-19.13-33.37-5.03-7.39-10.25-13.47-16.09-19.34,8.56-118.68-39.15-392.83-39.15-392.83l-93.45,17.66s51.1,189.81,84.56,371.26c-.18,.2-.33,.43-.42,.65-.26,.04-.51,.18-.67,.47-4.73,8.97-10.56,17.1-13.72,26.78-2.7,8.25-1.75,16.89-.1,25.23,2.48,12.43,5.53,23.97,5.88,36.82,.18,7.43-.36,14.93-1.11,22.32-.3,3.18-1.79,7.69-.71,10.94,3.06,8.99,16.93,4.79,21.33-.99,4.68-6.06,5.03-12.82,4.54-20.24-.51-8.02-1.44-15.74-1.82-23.59,1.87,5.97,4.69,11.58,7.71,17.21,6.61,12.25,9.7,23.83,12.98,37.25,3.22,13.08,5.16,26.24,7.91,39.38,1.51,7.14,5.53,15.28,12.7,18.03,4.65,1.78,8.21-4.53,9.07-7.96,.55-2.26,.84-4.49,.99-6.73,9.35,.36,12.82-13.24,14.13-24,8.97-.16,14.57-14.98,15.75-23.68,.03,0,.09-.03,.11-.02,.25-1.25-.17-8.92-.34-10.73,.07-.06,.15-.11,.21-.18Z" />
<g>
<path class="cls-18"
d="M2066.36,1443.39c-4.64-20.83-7.8-42.94-11.66-63.95,3.85,10.19,6.03,20.9,7.96,31.59,1.8,10.72,3.23,21.49,3.7,32.36h0Z" />
<path class="cls-18"
d="M2080.49,1419.39c-2.35-15.19-2.89-30.7-7.92-45.34,7.78,11.59,9.21,31.65,7.92,45.34h0Z" />
<path class="cls-18"
d="M2096.01,1384.95c-5.17-13.39-9.48-28.45-14.07-42.08,4.11,6.24,6.82,13.28,9.16,20.34,2.22,7.1,4.07,14.33,4.91,21.74h0Z" />
</g>
</g>
<path class="cls-7"
d="M2071.05,1022.74l-176.27,15.29s-11.95-289.48-.53-289.57c50.73-.42,180.67,105.32,176.8,274.28Z" />
</g>
</g>
<path class="cls-17"
d="M1756.58,805s116.45,101.59,176.79-28.5c0,0,121.13,74.22,107.25-75.46,0,0,151.99,42.24,48.56-109.39,0,0,166.02,6.48-49.76-165.35,0,0,102.58,22.55,90.41-56.06-12.18-78.61-126.66-82.11-126.66-82.11,0,0,93.53,11.6,82.64-48.88-10.9-60.49-115.71-91.16-216.56-65.82,0,0,129.44-19.08,97.73-93-31.71-73.92-188.5,3.39-188.5,3.39,0,0,63.95-79.02-34.06-83.68-98.01-4.66-143.39,102.84-143.39,102.84,0,0-65.95-89.85-130.13-84.42-64.18,5.43-28.85,64.12-28.85,64.12,0,0-108.9-22.04-140.95,39.83-32.05,61.87,70.38,129.13,70.38,129.13,0,0-84.91-53.6-142.12-19.76-57.21,33.84-59.61,93.61,53.09,118.76,0,0-115.56,22.7-119.66,124.02-.71,17.41,10.12,36.04,64.71,35.49,0,0-182.37,188.67,23.3,194,0,0-29.81,210.71,190.31,92.51,0,0,5.12,278.59,178.97,44.46,0,0,101.08,141.86,136.52-36.14Z" />
</g>
</g>
</g>
<rect class="cls-3" x="59.65" y="21.8" width="1920" height="1080" />
</g>
</g>
</g>
</g>
</svg>