Как импортировать SVG, чтобы он был полностью интерактивным с JS / CSS? - PullRequest
Новая
       10

Как импортировать SVG, чтобы он был полностью интерактивным с JS / CSS?

0 голосов
/ 05 августа 2020

Я создаю некоторые иллюстрации в Adobe Illustrator, а позже я экспортирую эту форму с функцией Save As, форматом SVG и любыми другими параметрами (экран ниже)

Теперь я хочу, чтобы этот SVG был полностью интерактивным с JS / CSS любые события, hovers et c. Моя проблема в том, что я не могу изменить или навести курсор на какой-либо из этих элементов / стилей формы.

Я пытался импортировать этот файл svg с помощью <img src="test.svg" /> или 

<object
    id="molecule"
    data="./test.svg"
    type="image/svg+xml"
></object>

Я также пытался импортируйте его с помощью: 

<svg>
  <use xlink:href="./test.svg#molecule" />
</svg>

Но все же я не могу настроить таргетинг или изменить какие-либо стили. Когда я копирую весь код из файла svg и вставляю его в html код, он работает отлично, и я могу стилизовать некоторые элементы внутри этой формы. Как правильно импортировать файлы svg в html или, может быть, я неправильно их экспортирую ??

Рабочий пример: 

#hover_x5F_1 {
  fill: red; // Works without !important but !important doesn't even work when import svg to html
}

svg {
  width: 200px;
  height: 200px;
}
<div class="container">
  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 245.1 275.5" enable-background="new 0 0 245.1 275.5" xml:space="preserve">
<g id="Layer_1">
</g>
<g id="Layer_2">
</g>
<g id="molecule">
    <g>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="74.7259" y1="160.2097" x2="130.9162" y2="190.8064">
            <stop  offset="0" style="stop-color:#0088E1"/>
            <stop  offset="1" style="stop-color:#003E6C"/>
        </linearGradient>
        <path fill="url(#SVGID_1_)" d="M120.1,187.3c-0.3,0-0.6-0.1-0.9-0.2l-40.5-23.5c-0.8-0.5-1.1-1.6-0.6-2.4c0.5-0.8,1.5-1.1,2.4-0.6
            l40.5,23.5c0.8,0.5,1.1,1.6,0.6,2.4C121.3,187,120.7,187.3,120.1,187.3z"/>
    </g>
    <g>
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="113.547" y1="83.7877" x2="76.9849" y2="121.5044">
            <stop  offset="0" style="stop-color:#0088E1"/>
            <stop  offset="1" style="stop-color:#003E6C"/>
        </linearGradient>
        <path fill="url(#SVGID_2_)" d="M78.9,111.7c-0.6,0-1.2-0.3-1.5-0.9c-0.5-0.8-0.2-1.9,0.7-2.4l41.1-23.4c0.8-0.5,1.9-0.2,2.4,0.7
            c0.5,0.8,0.2,1.9-0.7,2.4l-41.1,23.4C79.5,111.6,79.2,111.7,78.9,111.7z"/>
    </g>
    <g>
        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="161.1043" y1="125.0657" x2="173.9972" y2="164.3219">
            <stop  offset="0" style="stop-color:#0088E1"/>
            <stop  offset="1" style="stop-color:#003E6C"/>
        </linearGradient>
        <path fill="url(#SVGID_3_)" d="M164.8,161.6c-1,0-1.7-0.8-1.7-1.7v-47.1c0-1,0.8-1.7,1.7-1.7s1.7,0.8,1.7,1.7v47.1
            C166.6,160.9,165.8,161.6,164.8,161.6z"/>
    </g>
    <path fill="#004B80" d="M127.9,70.5c0,0-0.1,0.1-0.1,0.2v-0.2H127.9z"/>
    <path fill="#004B80" d="M25.1,193.9L25.1,193.9C25.1,194,25.1,194,25.1,193.9L25.1,193.9z"/>
    <path fill="#004B80" d="M121.9,24.7V54c0,0,0,0,0,0L121.9,24.7C121.8,24.7,121.9,24.7,121.9,24.7z"/>
    <path fill="#004B80" d="M129.8,204.3v0.3C129.7,204.5,129.7,204.5,129.8,204.3L129.8,204.3z"/>
    <path fill="#004B80" d="M127.9,70.5c0,0-0.1,0.1-0.1,0.2v-0.2H127.9z"/>
    <path fill="#004B80" d="M129.8,67.1v0.4l-0.1-0.1C129.7,67.3,129.7,67.2,129.8,67.1z"/>
    <path fill="#004B80" d="M232.4,189.5c-4.1-3.3-10.6-2.7-14,1.4c-8.3-5-16.8-10-25.2-15c2.4-5.7-1.6-12.8-7.8-13.6v-51.9
        c6.1-0.9,10.1-7.8,7.8-13.6c8.3-4.9,16.8-9.8,25.1-14.7c8.1,9.9,23.7-2.5,16-12.6c-6.6-9.5-22.1-1.1-17.8,9.6
        c-8.3,4.9-16.8,9.8-25.1,14.7c-3.8-4.8-11.8-4.7-15.6,0.1c-15.4-8.8-30.9-17.6-46.2-26.4c2.2-5.7-1.7-12.6-7.8-13.5c0,0,0,0,0,0
        V24.7c0,0,0,0,0,0c12.1-1.9,10.2-20.7-2-20.2c-12-0.1-13.5,18.5-1.6,20.2v29.3c-6.1,0.9-10.2,7.9-7.8,13.6
        C95.7,76.3,80.9,85,66.1,93.8c-3.8-4.8-11.8-4.7-15.6,0c-8.4-4.9-17-9.8-25.4-14.7c4.3-10.7-11.2-19-17.8-9.6
        c-7.8,10.2,8,22.5,16,12.6c8.4,4.9,17,9.9,25.4,14.7c-2.3,5.7,1.7,12.7,7.8,13.5v51.9c-6.1,0.9-10.2,7.9-7.8,13.6
        c-8.4,5-17,10-25.4,15c-8.1-9.9-23.7,2.5-16,12.6c6.6,9.5,22.1,1.1,17.8-9.6c8.4-5,17-10,25.4-15c3.8,4.8,11.8,4.7,15.6-0.1
        c14.8,8.5,29.6,17,44.3,25.4c-2.3,5.7,1.8,12.6,7.8,13.5v30.4c-12,1.8-10.4,20.5,1.7,20.2c12.1,0.3,13.8-18.4,1.8-20.2v-30.4
        c6-0.9,10-7.7,7.8-13.4c15.4-8.5,30.8-17.1,46.1-25.6c3.8,4.9,11.8,5,15.7,0.2c8.3,5,16.8,10,25.2,15
        C212,217.3,248.6,207.1,232.4,189.5z M182,162.3c-6,0.9-10.1,7.7-7.9,13.4c-15.4,8.5-30.8,17.1-46.1,25.6c-3.8-5-11.9-5-15.8-0.1
        c-14.7-8.5-29.6-17-44.3-25.4c2.2-5.8-1.8-12.6-7.8-13.5v-51.9c6.1-0.9,10.1-7.9,7.8-13.6c14.8-8.7,29.7-17.5,44.5-26.2
        c3.8,4.7,11.7,4.8,15.5,0.1v-0.2c15.5,8.6,30.9,17.6,46.4,26.4c-2.2,5.8,1.8,12.6,7.9,13.5V162.3z"/>
    <path fill="#004B80" d="M216.7,79.1L216.7,79.1L216.7,79.1C216.6,79.1,216.7,79.1,216.7,79.1z"/>
    <path fill="#004B80" d="M216.7,193.9c0,0,0,0.1,0,0.1L216.7,193.9L216.7,193.9z"/>
    <path fill="#004B80" d="M127.8,70.5v0.2c0-0.1,0.1-0.1,0.1-0.2H127.8z"/>
    <circle id="hover_x5F_1" fill="#95C6E5" cx="58.2" cy="100.3" r="10.1"/>
</g>
<g id="Layer_4">
</g>
</svg>

  
</div>

Экспорт в Adobe Illustrator:

введите описание изображения здесь

1 Ответ

1 голос
/ 05 августа 2020

Встраивание SVG в качестве внешних ресурсов любым способом (img, object, iframe) не позволяет вам применять любые CSS к его элементам содержимого. Вам нужно , чтобы поместить полную <svg>...</svg> прямо в HTML, чтобы это работало.

https://css-tricks.com/using-svg/#the -problem-with-both-img-and- background-image

Если вы не хотите статически копировать и вставлять содержимое файла SVG в документы HTML, вы также можете использовать язык программирования по вашему выбору для чтения содержимого SVG , а затем поместите его в документ.

Используя широко доступный PHP, который может выглядеть так же просто, 

<?php echo file_get_contents("kiwi.svg"); ?>

Если серверные языки не были доступны, запрос SVG через клиентский AJAX запрос, а затем вставка его в документ, также будет альтернативой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...