Question

我有一个svg，并且我想在其中包含一些文本，带有文本标签，但我做不到。因为在svg中使用文本标签对我来说不是一个好主意（无包装线，折线和文本元素的高度，请妥善处理）。所以我得到了foreignObject标签，并用h2标签和p标签定义了一个div像这样

 
	
	
	.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，在响应模式下表现为true，但是当我假定css中的转换样式以呈现透视图时会跳出的父母和站在窗口的左边。 wtf？！有什么主意吗？

Answer 1

我所做的更改：在HTML中，我添加了一个div #foWrap，并且在CSS中使用它而不是您的#campain。另外，您在CSS中有x和y。我已经将SVG中的#campain的x和y移了。另外，由于您的尺寸很小，因此我对变换使用了不同的角度。

我希望这就是你的要求。

svg{border:1px solid}
	
	
	.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;}
	
	
  
  #foWrap {
    perspective: 640px;
    perspective-origin: 43%;
    transform-style: preserve-3d;
}

 #foWrap .desc {
    font-size: 8px;
    direction: rtl;
    
    transform: rotateY(-50deg) rotateZ(10deg) rotateX(60deg);
    position: absolute;
    left: 0px;
    border:1px solid;
}

<svg id="catalogueSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 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="250" height="384" x="80" y="50" >
			
	<div id="foWrap">	
			<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>
	</div>
			
	</foreignObject>
</svg>

为什么CSS中的transform style将我的文本放在其父div之外？

1 个答案: