Как я могу смешать SVG и HTML на странице? - PullRequest
Новая
       9

Как я могу смешать SVG и HTML на странице?

6 голосов
/ 12 марта 2010

Я использовал плагин jQuery.svg , чтобы выполнить рендеринг SVG, и он отлично работает, но я также хочу, чтобы сервер рендерил немного SVG на страницу, и я не могу получить это Работа. Как добавить SVG, как показано ниже, на страницу, чтобы Firefox отображал ее? 

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>

    <div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>

    <svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
      <circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg>


    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
      <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg:svg>

    </body>
</html>

Нужен ли метатег, говорящий о том, что на странице есть контент SVG, или как-то определить пространство имен SVG?

Ответы [ 3 ]

1 голос
/ 12 марта 2010

См. эту ссылку (введение в SVG в HTML @ Mozilla Developer Center).

Пример встроенного SVG можно увидеть здесь .

0 голосов
/ 12 июня 2011
0 голосов
/ 12 марта 2010

Какой твой доктайп? Убедитесь, что это то же самое, что и в примере, то есть XHTML, а не HTML 4.01 TRANSITIONAL. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...