SVG Анимация, как установить z-index?

Question

[Axiniya]

Есть такой код

<svg  viewBox="0 0 113.392 113.392" xmlns="http://www.w3.org/2000/svg">
        <path class="fill-main-inverted"
                d="M 0,93.462 V 19.926 C 0,8.921 8.921,0 19.926,0 h 73.536 c 11,0 19.93,8.921 19.93,19.926 v 73.536 c 0,11 -8.93,19.93 -19.93,19.93 H 19.926 C 8.921,113.392 0,104.462 0,93.462 Z M 113.392,0"
                name="logo-background"></path>
        <path class="main-success line-path"
                d="M 14.174,42.521 42.521,14.174"
                name="logo-line0"></path>
        <path class="main-sunny line-path"
                d="M 14.174,70.867 70.867,14.174"
                name="logo-line1"></path>
        <path class="main-info line-path"
                d="M 14.174,99.212 99.212,14.174"
                name="logo-line2"></path>
        <path class="main-warning line-path"
                d="M 42.521,99.212 99.212,42.521"
                name="logo-line3"></path>
        <path class="fill-main-font"
                id="logo-dot"d="m 103.462,92.132 c 0,-6.267 -5.07,-11.343 -11.33,-11.343 -6.267,0 -11.343,5.076 -11.343,11.343 0,6.26 5.076,11.33 11.343,11.33 6.26,0 11.33,-5.07 11.33,-11.33 z m -11.33,0"
                name="logo-dot"></path>
        </svg>

С такими стилями:

svg {
			pointer-events: none;
			width: 300px;
		}
		path.line-path {
			stroke-width:9.96280003;
			stroke-linecap:round;
		}
		svg.main-bg > path,
		path.main-bg.line-path {
			stroke: rgba(0, 0, 0, 1);
		}
		svg.main-font > path,
		path.main-font.line-path {
			stroke: rgba(255, 255, 255, 1);
		}
		svg.main-inverted > path,
		path.main-inverted.line-path {
			stroke: rgba(255, 255, 255, 1);
		}
		svg.main-warning > path,
		path.main-warning.line-path {
			stroke: rgba(239, 72, 61, 1);
		}
		svg.main-info > path,
		path.main-info.line-path {
			stroke:  rgba(255, 143, 18, 1);
		}
		svg.main-sunny > path,
		path.main-sunny.line-path {
			stroke: rgba(255, 209, 0, 1);
		}
		svg.main-success > path,
		path.main-success.line-path {
			stroke: rgba(0, 174, 65, 1);
		}
		path.fill-main-bg {
			fill: rgba(0, 0, 0, 1);
		}
		path.fill-main-font {
			fill: rgba(255, 255, 255, 1);
		}
		path.fill-main-inverted {
			fill: rgba(0, 0, 0, 1);
		}
		path.fill-main-warning {
			fill: rgba(239, 72, 61, 1);
		}
		path.fill-main-info {
			fill: rgba(255, 143, 18, 1);
		}
		path.fill-main-sunny {
			fill: rgba(255, 209, 0, 1);
		}
		path.fill-main-success {
			fill: rgba(0, 174, 65, 1);
		}

.main-success {
	position: relative;
	z-index: 2;
}

.main-info {
	position: relative;
	z-index: 2;
}


.fill-main-font {
	z-index: 1;
	position: relative;
	box-shadow: 2px 5px 10px rgba(0,0,0,0.5);
	border-radius: 100%;
	width: 100px;
	height: 100px;
	-webkit-animation: pulsing 3s infinite;
	animation: pulsing 3s infinite;
}

@-webkit-keyframes pulsing {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1)
  }
}

@keyframes pulsing {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
  }
}

Как сделать чтобы белая точка проходила ПОД каждой второй линией?
И как добавить ей тень?

Comments

[Sergey]

Объекты в svg позиционируются так, как представлены в коде. Нельзя z-index менять с помощью css, но можно скриптом дописывать в конец svg новый path который будет выше всех остальных. Но в вашей анимации это будет такооой код, что врядли оно того стоит.

Answer 1

[RAX7]

В svg нет z-index, как и многих других свойств, потому что это css свойства. Элементы рисуюся в том порядке, в котором они находятся в DOM.
Как сделать тень смотри тут:
https://developer.mozilla.org/en-US/docs/Web/SVG/E...
https://www.w3schools.com/graphics/svg_feoffset.asp