2015-04-08 11 views
0

當在<use>標籤內使用時,Webkit將忽略ForeignObject接縫。通過Webkit在使用標籤中忽略ForeignObject

代碼:

<body> 
    <svg id="my-svg" width="140" height="70" style="width: 140px; height: 70px;"> 
     <g x="10" y="10" width="80" height="60"> 
      <svg x="10" y="10" width="80" height="60"> 
       <rect width="80" height="70" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> 
      </svg> 
     </g> 
     <g x="55" y="35" width="85" height="17"> 
      <foreignObject width="85" height="17" x="55" y="35"> 
       <p xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;">Lorem</p> 
      </foreignObject> 
     </g> 
    </svg> 

    <svg pointer-events="none" x="15" y="10" width="141" height="71"> 
     <use xlink:href="#my-svg"></use> 
    </svg> 
</body> 

結果在Chrome/Safari瀏覽器/歌劇: enter image description here

結果在Firefox enter image description here

我的代碼是否正確?有沒有解決方法?

回答