Различные способы вставить HTML -страницу в SVG

SVG (масштабируемая векторная графика) - это масштабируемый формат векторного изображения, основанный на синтаксисе XML. Другие форматы изображений основаны на обработке пикселей, в то время как SVG является описанием формы изображения, поэтому это по сути текстовый файл, с относительно небольшим размером и не будет искажены при увеличении.

Вставьте теги SVG

Используйте тег <svg> , чтобы напрямую вставить контент в веб -страницу, стать частью DOM, а затем вы можете использовать CSS и JS для управления.

Простой круг:

 <svg width = 400 heihgt = 300 id = testsvg> <circle cx = 100 cy = 100 r = 50 fill = red ucke = черный ход инсульта = 2 id = testcircle> </circle> </svg> // может использовать CSS для контроля стиля SVG, но атрибуты отличаются от обычных веб-элементов. #ccc;} #testsvg circle {fill: red; ход: синий; ширина инсульта: 3; } </style> // Вы можете использовать JS для работы SVG, создания простых анимаций и т. Д. circle.addeventlistener (chlick, function (e) {console.log (chlick oudge ...); circle.setattribut attributeName = cx от = 100 до = 300 dur = 2s repeatCount = indefinite> </animate> </circle> </svg>

Эффект отображения:

Вставьте файл SVG

Вы можете использовать <img> <embed> <object> <iframe> и другие теги для вставки файлов SVG в веб -страницы.

За исключением <img> , двойной тег должен использоваться.

 //Use the <img> tag <img src=test.svg' />//or the base64 encoding of SVG <img src=data:image/svg+xml;base64,[data] />//Use the <embed> tag <embed id=embedSvg type=image/svg+xml src=test.svg></embed>//Get SVG Domvar embedsvg = document.getElementbyId (embedSvg) .getSvgdocument (); console.log (svg dom:, ampedsvg); // Использование <Object> Tag <Object id = objectSvg = image/svg+xml data = test.svg> </object> // get svg domvar object obj document.getElementById (objectSvg) .getSvgDocument (); console.log (svg dom:, objectsvg); // Использовать <iframe> tag <iframe id = iframesvg src = test.svg> </iframe> // get svg domvar = document.getElementbyId (iframesvg) .contentDocument; console.log (svg dom:, iframesvg);

SVG DOM Вывод:

Используйте SVG в качестве фонового изображения для других элементов веб -страницы

Это замаскированный способ вставить SVG в веб -страницу, то есть использовать SVG в качестве обычной картинки и не может отображать эффекты анимации.

 <стиль типа = текст/css> .svg-div {width: 400px; высота: 300px; фон: url (test.svg) Центр без повторного оборудования/50%; граница: 1px solid #ccc;} </style> <div class = svg-div> </div>

Эффект:

Читать исходный код SVG

Поскольку файл SVG по сути является частью текста XML, исходный код SVG можно прочитать, прочитав код XML.

 var svgstr = new XmlSerializer (). SerializetoString (document.getElementByID (testSvg)); console.log (svgstr);

Суммировать

Это конец этой статьи о различных способах вставки SVG на HTML -страницах. Для получения более актуального HTML -вставки SVG -контента, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!