У меня есть svg, и я хочу, чтобы в нем был какой-то текст, с текстовым тегом, который я не могу сделать. потому что работа с текстовым тегом в svg не очень хорошая идея для меня (без переноса строк, разрывов строк и высоты текстового элемента, не могу с этим справиться).
поэтому я получил тег foreignObject и определил div внутри него с помощью тега h2 и тега p, например:
.st3{fill:url(#XMLID_2_);}
.st4{fill:none;stroke:#BBBDBF;stroke-width:0.7985;stroke-miterlimit:10;}
.st5{fill:none;stroke:#BBBDBF;stroke-width:0.7985;stroke-miterlimit:10;stroke-dasharray:4.6022,4.6022;}
.st6{fill:none;stroke:#BBBDBF;stroke-width:0.8067;stroke-miterlimit:10;}
.st7{fill:none;stroke:#BBBDBF;stroke-width:0.8067;stroke-miterlimit:10;stroke-dasharray:4.5551,4.5551;}
#campain {
x: 20;
y: 72;
perspective: 64px;
perspective-origin: 43%;
}
#campain > .desc {
font-size: 8px;
direction: rtl;
transform-style: preserve-3d;
transform: rotateY(8.5deg) rotateZ(1deg) rotateX(0.6deg);
position: absolute;
left: 0px;
}
<svg id="catalogueSvg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600">
<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="-23.964" y1="247.5691" x2="222.1289" y2="233.4258">
<stop offset="0" style="stop-color:#FFFFFF" />
<stop offset="0.9999" style="stop-color:#CDCDCD" />
</linearGradient>
<polyline id="XMLID_8_" class="strk st3" points="31.3,36.5 31.3,452.3 157.8,413.1 157.8,94.2 31.3,36.5 " />
<g>
<g>
<line class="strk st4" x1="156.3" y1="407.3" x2="154.1" y2="408" />
<line class="strk st5" x1="149.7" y1="409.3" x2="37.1" y2="442.5" />
<line class="strk st4" x1="34.9" y1="443.1" x2="32.7" y2="443.8" />
</g>
</g>
<g>
<g>
<line class="strk st6" x1="30.1" y1="45.9" x2="32.2" y2="46.8" />
<line class="strk st7" x1="36.4" y1="48.6" x2="151.2" y2="98.8" />
<line class="strk st6" x1="153.2" y1="99.7" x2="155.4" y2="100.7" />
</g>
</g>
<foreignObject id="campain" width="150" height="384" >
<body xmlns="http://www.w3.org/1999/xhtml">
<div class="desc">
<h2>bla bla ba</h2>
<p>bla bla ba bla bla ba bla bla ba
bla bla ba bla bla ba bla bla ba
......
</p>
</div>
</body>
</foreignobject>
</svg>
текст ведет себя так, как я хочу, пока у него нет стиля преобразования, я имею в виду, что он содержится в родительском элементе и наследует width, height, ведет себя как истина на адаптивных посохах, но когда я предполагаю, что стиль преобразования в css для визуализации перспективы ведет себя выпрыгивающим родителя и стоять слева от окна. Вуф?!
есть идеи?