Как да вградите html код между SVG тагове

Приложението ми беше във VML, което ми позволи да вградя html между VML тагове. Но VML поддържа само до IE-8. Сега преобразувах VML в SVG с помощта на vectorconverter. Но SVG не позволява вграждането на html таг между SVG таговете. След търсене в stack и google попаднах на използване на тагове foreignobject, но също така поддържа само до IE-8. Опитах също така да използвам етикет switch, поставен над тагове за чужди обекти, но не проработи. Има ли някакъв начин, където мога да вградя html кода между SVG таговете, т.е. по-долу. Благодаря предварително

<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>


svg html css vml
person Nikhil Kadam    schedule 30.09.2016    source източник
comment
Вероятно можете да постигнете това, за което използвате SVG в CSS сега   -  person Matt    schedule 30.09.2016
comment
можеш ли да ми дадеш един пример   -  person Nikhil Kadam    schedule 30.09.2016
comment
Дайте ми пример за това, което се опитвате да направите и може би ще успея   -  person Matt    schedule 30.09.2016
comment
Можете също да вземете горния пример за код, за да мога да добия представа.   -  person Nikhil Kadam    schedule 30.09.2016

Отговори (2)


arrow_upward
1
arrow_downward

Можете да постигнете това само с 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;
}
person Matt    schedule 30.09.2016
comment
но не се поддържа в Internet Explorer, ако използваме чужд обект - person Chandu D; 03.10.2016
comment
Той изобщо не използва SVG или чужди обекти. - person Matt; 03.10.2016

arrow_upward
0
arrow_downward

Вашият въпрос е дубликат на: възможно ли е да се добави div вътре в svg елемент

Не можете да добавите HTML към SVG (технически можете с ForeignObject, но това е заешка дупка). Освен това, видимите елементи в SVG не могат да бъдат вложени, така че елементи като кръг, правоъгълник, път и други не могат да имат дъщерни елементи.

person Code Spirit    schedule 30.09.2016
comment
Но има ли някакво решение. Тъй като имам тагове div, span, table и т.н., което не е възможно да се запише в тагове SVG дори след конвертиране от html в SVG - person Nikhil Kadam; 30.09.2016
comment
Не можете да конвертирате HTML в SVG. SVG изглежда почти същият като HTML, но не е. Това е просто друг език за маркиране (като XML). Заобиколните решения зависят от това, което се опитвате да постигнете. Решението би било да position елементите relative или absolute над вашите <svg> - person Code Spirit; 30.09.2016