Как вставить картинку между svg?

Question

[yoyoyooyoyoyoyoyoyoyoyoyo]

Есть svg анимация волн и png анимация картинки. Можно ли это картинку вставить между волн ?
Чем заменяется z-index в таком случае ?

<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">

 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>

svg {
	margin-bottom: -30px;
	height: 150px;
	width: 100%;
}
.volni {
	padding: 0px;
	margin-bottom: 10px;
}
.parallax > use {
  animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 9s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 8s;
}
@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

Ну и обычная картинка

<img src="./image/catalog/kartinka.png" class="kartinka-img"/>

Comments

[Froggyweb]

у тебя один svg/ или внутрь или никак

[yoyoyooyoyoyoyoyoyoyoyoyo]

Froggyweb, один свг, но там 3 волны

<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>

Картинку надо вставить между ними. Если просто так вставлять, но все ломается.

[Froggyweb]

yoyoyooyoyoyoyoyoyoyoyoyo, мне в jpg нудно добавить 2 пиксела.
в сложных случаях можно генерировать svg динамически, то это не про то....

[Александр]

ды, хорош. svg в студию и все попробуют туда чего-то вставить потом тебе раскажуть
так-то чего гадать...

Answer 1

[Максим]