#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)