Как вставить 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