1 Тема від FakiNyan Востаннє редагувалося FakiNyan (22.04.2018 18:24:12)

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Тема: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

Хай.
Є звичайний html5 документ, і є SVG, котрий виглядає ось так 

<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (C) 2009/2010/2011 Ulrich Apel.
This work is distributed under the conditions of the Creative Commons
Attribution-Share Alike 3.0 Licence. This means you are free:
* to Share - to copy, distribute and transmit the work
* to Remix - to adapt the work

Under the following conditions:
* Attribution. You must attribute the work by stating your use of KanjiVG in
  your own copyright header and linking to KanjiVG's website
  (http://kanjivg.tagaini.net)
* Share Alike. If you alter, transform, or build upon this work, you may
  distribute the resulting work only under the same or similar license to this
  one.

See http://creativecommons.org/licenses/by-sa/3.0/ for more details.
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST g
xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net"
kvg:element CDATA #IMPLIED
kvg:variant CDATA #IMPLIED
kvg:partial CDATA #IMPLIED
kvg:original CDATA #IMPLIED
kvg:part CDATA #IMPLIED
kvg:number CDATA #IMPLIED
kvg:tradForm CDATA #IMPLIED
kvg:radicalForm CDATA #IMPLIED
kvg:position CDATA #IMPLIED
kvg:radical CDATA #IMPLIED
kvg:phon CDATA #IMPLIED >
<!ATTLIST path
xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net"
kvg:type CDATA #IMPLIED >
]>
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
<g id="kvg:StrokePaths_0ff46" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;">
<g id="kvg:0ff46">
    <path id="kvg:0ff46-s1" d="M75.92,16.8c-12.58-3.76-22.34,0.58-22.34,12.14c0,11.57,0,55.91,0,63.86"/>
    <path id="kvg:0ff46-s2" d="M39,36.74c5.35,0,30.01,0,35.64,0"/>
</g>
</g>
<g id="kvg:StrokeNumbers_0ff46" style="font-size:8;fill:#808080">
    <text transform="matrix(1 0 0 1 73.98 12.61)">1</text>
    <text transform="matrix(1 0 0 1 33.01 34.92)">2</text>
</g>
</svg>

Я хочу відобразити цей документ всередині div. Але воно просто показує текст xml'а.
Якщо відкрити цей xml окремо, в браузері, то все працює файно, і я бачу картинку.
Як показати цю картинку всередині div'а ?

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

хм, якщо вставляти то через js, то норм працює, а через {{}} ні.

3 Відповідь від Lace

  • Lace
  • Lace
  • Користувач
  • Поза форумом
  • Дата реєстрації: 25.07.2017
  • Повідомлень: 157
    • Репутація: 116

Re: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

Таке треба?
<img scr="path_to_svg" alt="svg">

4 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

Сам SVG-файл можна зберігати так :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
    <g style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;">
    <g>
        <path d="M75.92,16.8c-12.58-3.76-22.34,0.58-22.34,12.14c0,11.57,0,55.91,0,63.86"/>
        <path d="M39,36.74c5.35,0,30.01,0,35.64,0"/>
    </g>
    </g>
    <g style="font-size:8;fill:#808080">
        <text transform="matrix(1 0 0 1 73.98 12.61)">1</text>
        <text transform="matrix(1 0 0 1 33.01 34.92)">2</text>
    </g>
</svg>

HTML-файл буде виглядати так :

<!DOCTYPE html>
<html lang="uk">
    <head>
        <title>Title</title>
    </head>
    <body>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
                <g style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;">
                <g>
                    <path d="M75.92,16.8c-12.58-3.76-22.34,0.58-22.34,12.14c0,11.57,0,55.91,0,63.86"/>
                    <path d="M39,36.74c5.35,0,30.01,0,35.64,0"/>
                </g>
                </g>
                <g style="font-size:8;fill:#808080">
                    <text transform="matrix(1 0 0 1 73.98 12.61)">1</text>
                    <text transform="matrix(1 0 0 1 33.01 34.92)">2</text>
                </g>
            </svg>
        </div>
    </body>
</html>
Подякували: FakiNyan, Lace2

leofun01 вебсайт

5 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

ну так, я ще видалив все, що йде до 

<svg

img не треба

6 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як відобразити xml, що містить svg, всередині div'а HTML5 ? [ВИРІШЕНО]

бачу, що й через src img можна, але тоді не видно структури svg. А якщо хочеться підсвічувати певні групи всередині svg?.. Виходить, що кожного разу треба робити запит на сервер, ех...