Блог

Главная - Вопросы по программированию - Как добавить локальное изображение SVG с D3.JS

Как добавить локальное изображение SVG с D3.JS

#javascript #svg #d3.js #append #href

#javascript #svg #d3.js #добавить #href

Вопрос:

Я работаю с d3.js и я пытаюсь добавить изображение (svg или png) в свой SVG, но проблема в том, что я использую xlink:href и не могу использовать локальные файлы. Мне нужно использовать локальные файлы, потому что мое приложение будет только локальным.

Вот код:

 groupRectParent
        .append('svg:image')
            .attr('class', 'iconUserTotal')
            .attr('width', 10)
            .attr('height', 10)
            .attr('x', 5)
            .attr('y', -15)
            .attr('xlink:href', '/src/img/user.png')

Есть ли способ решить эту проблему?

Это то, что происходит с моим кодом Это то, что происходит с моим кодом

Спасибо за вашу помощь.

Комментарии:

1. Запустите локальный веб-сервер и обслуживайте страницы через него.

2. На самом деле я использую локальный веб-сервер, но я не понимаю, что вы подразумеваете под «обслуживать страницы через это». Мое приложение представляет собой сервер react JS.

3. Он говорит, что вы можете обслуживать статические файлы, в данном случае изображения, через сервер, используя обычный URL. Еще одна вещь, которую вы могли бы сделать, это просто упаковать svg в свой код в виде строки в кодировке base64 и сервер svg из этой строки.

Ответ №1:

Спасибо Вассерхольцу за ответ, кодирование SVG и использование строки сработали хорошо. Я только что изменил xlink:href на href и закодировал свой SVG.

 groupRectParent
        .append('svg:image')
            .attr('class', 'iconUserTotal')
            .attr('width', 10)
            .attr('height', 10)
            .attr('x', 5)
            .attr('y', -15)
            .attr('href', 'data:image/svg xml;base64,'   encodedSVGString)