我有一个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>
文本的行为符合我的要求,直到没有变换样式,我的意思是它包含在父元素中,并继承宽度、高度,在css中的行为符合我的要求,但当我假设css中的变换样式呈现透视时,它会跳出父元素并站在窗口左侧。世界跆拳道联盟?!
知道吗?
