Есть ли способ использовать псевдоэлемент: before: after в svg path - PullRequest
Новая
       39

Есть ли способ использовать псевдоэлемент: before: after в svg path

0 голосов
/ 17 апреля 2020

Я пытаюсь добавить новый элемент после пути svg, который будет иметь ту же форму и путь, что и его родитель, используя: after или: before

Я создал тег ag, оборачивающий путь, который я хочу цель называет это глазами класса 

	<div id="svg-container">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 641.27 1107.33">
		<defs>
			<style>
			.cls-30,.cls-32{stroke:#000;}.cls-30,.cls-32{stroke-miterlimit:10;}.cls-32{stroke-width:2px;}.cls-32{fill:#fff79a;}
			</style>
		</defs>

	<g class="eyes" id="GLOBE_GAUCHE" data-name="GLOBE GAUCHE">
		<path class="cls-32" d="M298.37,210.19a39.52,39.52,0,0,0-18.46,7.23c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.45,39.45,0,0,0-.5-15.94C348.79,229.24,337.62,205.53,298.37,210.19Z" transform="translate(-63.9 148.72)">	
		</path>
	</g>

	<g class="pupilles" id="PUPILLE_GAUCHE" data-name="PUPILLE GAUCHE">
		<path class="cls-30" d="M281.69,266.67s-1.81-13.91,3.65-2.52c3.85-1.57,13.76-7.9,7.61.2,1.37,1.6,8.89,2.93-.84,4.93.48,2.24,6,10-3.41,4.87-1.9-.39-4,9.57-5.66-.92C282.63,271.22,272.29,270.37,281.69,266.67Z" transform="translate(-63.9 148.72)">	
		</path>
	</g>

	<g class="eyes" id="GLOBE_DROIT" data-name="GLOBE DROIT">
		<path class="cls-32" d="M434.11,207.73A39.52,39.52,0,0,0,415.65,215c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.63,39.63,0,0,0-.5-15.94C484.53,226.78,473.35,203.07,434.11,207.73Z" transform="translate(-63.9 148.72)">	
		</path>
	</g>

	<g class="pupilles" id="PUPILLE_DROIT" data-name="PUPILLE DROIT">
		<path class="cls-30" d="M450.29,260.72s8.59-12.71-4.63-4.78c-1.06-1.35-5-7.78-5.28-.32-1,2.91-15.65,1.23-1.35,7.42.61,1.7-5.82,5.89,2.28,4.74.91,1.9,2.19,6.85,5.92.87C450.32,265.93,457.76,268.9,450.29,260.72Z" transform="translate(-63.9 148.72)">	
		</path>
	</g>
</svg>
</div>

Затем в css я пытаюсь вставить новый элемент: после пути класса глаз 

html, body {
   height: 100%;
   margin: 0;
}

#svg-container {
  background-color: #f1f1f1;
  height: 100%;
}

svg {
  display: block;
  margin: auto;
  height: 100%;
}
.eyes path::after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 width: 100%;
	 background: #d9a12a;
}

Я вижу в консоли, что он создает элемент: after в правильном положении, однако он не отображается, а количество пикселей не отображается ( даже не 0)

Есть ли способ реализовать это?

...