如何在SVG標籤之間嵌入html代碼

我的應用程序是在VML中，它允許我在VML標籤之間嵌入html。但VML只支持IE-8。現在我已經使用vectorconverter將VML轉換爲SVG。但SVG不允許在SVG標籤之間嵌入html標籤。搜索堆棧和谷歌我遇到使用foreignobject標籤，但它也只支持，直到IE-8。我也嘗試使用開關標籤放置在異物標籤上方，但它沒有奏效。有沒有什麼方法可以在SVG標籤之間嵌入html代碼，即下面。在此先感謝如何在SVG標籤之間嵌入html代碼

<html> 
<head> 
<meta charset="UTF-8"> 
<title>HTML inside SVG</title> 
<style type="text/css"></style></head> 
<body>   
    <svg width="500" height="300" style="border:1px red solid"> 
     <switch> 
     <foreignobject class="node" x="46" y="22" width="100" height="100"> 

       <div style="border:1px green solid">I'm a div inside a SVG.</div>     
     </foreignobject> 
     </switch> 
    </svg> 
    <div>Interesting! But you a Foreign Object.</div> 
</body>

來源

2016-09-30 nikalldway

你或許可以完成你用的是什麼了SVG在CSS現在 – Yoda

你能不能給我一個例子 – nikalldway

給我的你正在嘗試做一個例子，我也許能 – Yoda

您只能使用CSS來實現此目的。見附件jsFiddle。我已經將您的示例留在html/css實現之上以供參考。

https://jsfiddle.net/Lwtb9w5s/

<div class="container"> 
    <div class="inner"> 
    <span>I'm a div inside a SVG.</span> 
    </div> 
</div> 

.container { 
    height: 300px; 
    width: 500px; 
    border:1px red solid 
} 

.inner { 
    border:1px green solid; 
    position: relative; 
    top: 22px; 
    left: 46px; 
    width: 100px; 
}

來源

2016-09-30 13:07:11 Yoda

之上''相對'或'絕對'元素的位置'感謝尤達這肯定會幫助我.. – nikalldway

但它不支持在Internet Explorer中如果我們使用的是異物 –

它不完全可以使用SVG或異物。 – Yoda

你的問題的重複：is it possible to append a div inside svg element

您不能追加的HTML SVG（與foreignObject技術上可以，但它是一個兔子洞）。而且，SVG中的可見元素不能嵌套，因此諸如circle，rect，path等元素不能包含子元素。

來源

2016-09-30 12:55:09

但是有沒有解決辦法。因爲我有div，span，table等標籤，即使在將html轉換爲SVG後，也無法在SVG標籤中編寫代碼 – nikalldway

您無法將HTML轉換爲SVG。 SVG似乎與HTML幾乎相同，但它不是。它只是另一種標記語言（如XML）。變通辦法取決於您要完成的任務。解決的方法是在'

如何在SVG標籤之間嵌入html代碼

回答

相關問題