Как я могу загрузить SVG из внешнего файла в SVG JS 3? - PullRequest
Новая
       52

Как я могу загрузить SVG из внешнего файла в SVG JS 3?

0 голосов
/ 20 февраля 2020

Как я могу загрузить SVG из внешнего файла в SVG JS 3? Есть много примеров для версии 2.7, но я не могу найти какой-либо метод, который работает в SVG. JS 3. Даже тот, который в документах, у меня не работает:

Пример из документов: :

var use = draw.use('elementId', 'path/to/file.svg')

Итак, работая над этим примером, я предполагал, что будет работать следующий код: 

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
</head>
<body>

<div id="svgimage" style="width: 1000px;height:1000px"></div>

<script>
    $(document).ready(function () {

        var draw = SVG();
        var image = draw.use('svgimage', 'image.svg')

    });
</script>

</body>
</html>

Однако я вижу, что Chrome загружает Файл "image.svg", но, похоже, ничего с ним не делает, и на консоли JS нет ошибок.

Если я проверяю DOM в F12, я не вижу никаких признаков из SVG.

Что я делаю не так?

1 Ответ

0 голосов
/ 21 февраля 2020

Этот код не будет работать и в 2.x. Кажется, вы должны прочитать об элементе <use>. «use» не загружает изображение в Dom, где вы можете манипулировать им. Это для отражения существующих элементов. Поэтому, когда вы вызываете «use», вы передаете идентификатор элемента для зеркального отображения. Тем не менее, вы также можете отражать элементы из внешних svgs. Поэтому вы дали второй параметр, где вы можете передать в URL. Тем не менее, вы не можете манипулировать svg таким образом, потому что «use» создает теневой Dom для отображения элемента, поэтому его нельзя редактировать. Если это уже то, что вы хотите, вы можете просто загрузить изображение svg в тег 'img'. Однако, если вы действительно хотите манипулировать изображением после его загрузки, вы должны сделать запрос Ajax и физически поместить svg в Dom, чтобы svg. js мог получить к нему доступ.

К вашему примеру: как указано, «использовать» - это не то, что вам нужно. Однако есть вторая ошибка. Вы никогда не присоединяете документ svg к Dom. Беглый взгляд на инспектора Dom должен показать вам это. То, что вы хотите сделать, это использовать SVG().addTo('#someId'). Однако, как обсуждалось выше, вы, скорее всего, захотите поместить внешний svg в Dom. Таким образом, чтобы получить SVG с svg. js, который уже находится в Dom, используйте SVG(ID)

...