Vue.js конвертирует элемент svg $ ref в dataURL - PullRequest
Новая
       42

Vue.js конвертирует элемент svg $ ref в dataURL

0 голосов
/ 14 марта 2019

В vue.js я пытаюсь преобразовать элемент svg в dataURL с помощью пакета npm svg-to-dataurl

Я использую $ refs для получения элемента, 

<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                </svg>

Я нажимаю кнопку, вызывающую метод, который получает указанный элемент. 

refSVG(){
        this.svgStr = this.$refs.referenceSVG
        ......
    }

Далее я записываю эту переменную, которая имеет тип string, 

console.log(this.svgStr);//is an object

enter image description here

Если я передам this.svgStr функции svgToDataUrl (this.svgStr), dataURL будет создан неправильно и выдаст

enter image description here

Если, с другой стороны, я передаю элемент в виде строки, подобной этой, 

this.dataUrl = svgToDataURL('<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>')

Это дает dataURL, который можно использовать, 

data:image/svg+xml,%3Csvg%20ref%3D%22referenceSVG%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E

Так что кажется, что источник svgStr необходимо преобразовать в строку. Для этого я использовал 

this.toString = this.svgStr.toString()

и записал его, что дает, 

[object SVGSVGElement]

Который не является полным элементом, который я ожидаю, и поэтому не используется в svgToDataUrl ().

Как я могу получить элемент в функцию svgToDataUrl () для преобразования в dataURL?

Также я не уверен, стоит ли мне говорить о dataUri или dataUrl?

Любая помощь будет принята с благодарностью.

Спасибо

1 Ответ

0 голосов
/ 15 марта 2019

Ваша переменная относится не к типу string, а к типу Object. Поэтому, если вы вызовете toString() для него, он вернет строковое представление этого объекта, а не содержимое SVG, которое вы ищете.

Вы можете получить доступ к HTML-представлению узла ref, просто используя его свойство outerHTML: 

this.svgStr = this.$refs.referenceSVG.outerHTML
...