Это потому, что функция foo
ожидает массив / строку, чтобы он мог ее уничтожить.
Поскольку вы ничего не пропускаете, это приводит к сбою разрушения, это похоже на выполнение
var arrayVariable = undefined
var [a, b, c] = arrayVariable // this will throw an error
var d = arrayVariable['a'] // this will throw an error
Итак, чтобы избежать ошибки, укажите аргумент массива
foo('') // undefined, undefined, undefined
foo('123') // 1, 2, 3
foo([]); // undefined, undefined, undefined
foo([1, 2, 3]) // 1, 2, 3
Лучше добавлять изображения во фрагмент svg
, используя тег svg
<image>
В приложении SVG нет текста, требующего автоматического переноса, например HTML
, поэтому в этом нет необходимости. использовать <foreignObject>
Изображения имеют разные размеры, поэтому мы берем изображение смартфона за основу, и изображение с текстом будет соответствовать по размеру первому изображению.
<image transform="translate(65 77) scale(0.9 0.99)"
.container {
width:25%;
height:25%;
}
<div class="container">
</style>
<svg id="designBox" width="100%" height="100%" viewBox="0 0 1242 2688">
<image transform="translate(65 77) scale(0.9 0.99)" width="100%" height="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/Screenshot.png" />
<image class="backgroundBox" width="100%" height="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/XS_Max_Space_GrayNEW.png" />
</svg>
</div>
Приложение работает адаптивно во всех современных браузерах .
Настройте CSS, удалите некоторые и упростите некоторые, чтобы это исправить.
html,
body,
.backgroundBox,
.elemBox.graphic img {
width: 100%;
height: 100%;
}
html,
body {
margin: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0);
}
.elemBox,
.backgroundBox.design,
.elemBox>* {
position: absolute;
}
<svg id="designBox" width="100%" height="100%" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<img class="backgroundBox design" src="/images/general/transparent.gif" style="left:0%; top:0%; width:100%; height:100%; background:#00B9FC">
<div class="elemBox graphic movable" style="left: 0px; width: 1242px; height: 2688px; top: 0px;" id="g3kIEZGGog71">
<div class="foregroundBox" style="top: 74px; left: 76px; width: 1090px; height: 2540px;">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/Screenshot.png">
</div>
<img class="backgroundBox" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/XS_Max_Space_GrayNEW.png">
</div>
</foreignObject>
</svg>
Ваши изображения имеют размер 2688x1242 и 1792x828. Это дает соотношение 2,1642.
С другой стороны, в foregroundBox вы устанавливаете размеры 2540x1090, что имеет отношение 2,33
Затем, применительно к объекту: содержит принудительное изменение размера, потому что отношение не подходит .
Вам нужно изменить размеры foregroundBox на такое же соотношение, как и у изображения, и все будет хорошо