SVG Data isn't showing up at all

Adobe XD UXP Plugin API
1

I generated svg path data in the form of a string inside motifPathData, and then

motifPath.pathData = motifPathData.toString(); motifPath.stroke = new Color("red"); motifPath.strokeWidth = 3; selection.insertionParent.addChild(motifPath);

The console.log(motifPathData) is

M 1433.87109375 113.73046875 L 1367.62109375 113.7304687538.249455333812705 L 1433.87109375 151.9799240876127 L 1500.12109375 190.2293794214254 L 1566.37109375 228.4788347552381 L 1632.62109375 266.7282900890508 L 1566.37109375 304.9777454228635 L 1632.62109375 343.2272007566762 L 1566.37109375 381.4766560904889 L 1632.62109375 419.7261114243016 L 1566.37109375 457.9755667581143 L 1632.62109375 496.22502209192703 L 1566.37109375 534.4744774257397 L 1632.62109375 572.7239327595523 L 1566.37109375 610.973388093365 L 1500.12109375 649.2228434271776 L 1566.37109375 687.4722987609903 L 1500.12109375 725.7217540948029 L 1433.87109375 763.9712094286156 L 1367.62109375 802.2206647624282 L 1301.37109375 840.4701200962409 L 1367.62109375 878.7195754300535

Doesn’t render anything. I can figure out why, it looks to be valid data for svg.

1 Like
2

@randyhuynh can you please confirm your path data is correct? As long as your path data is correct, XD should be able to render it. For example, try this:

const data = `M 213.1,6.7 c -32.4-14.4-73.7,0-88.1,30.6 C 110.6,4.9,67.5-9.5,36.9,6.7 C 2.8,22.9-13.4,62.4,13.5,110.9 C 33.3,145.1,67.5,170.3,125,217 c 59.3-46.7,93.5-71.9,111.5-106.1 C 263.4,64.2,247.2,22.9,213.1,6.7 z`
1 Like
3

Yep, that works. I’m not sure why mine is not coming out to anything.

1 Like
4

Looks like you have some invalid syntax here:
L 1367.62109375 113.7304687538.249455333812705
(notice the doubled decimal point)

Probably always good to sanity-check things like this by pasting it into an SVG file and seeing if it renders correctly in a browser. You basically get a blank image in Chrome, Safari, etc. if you try putting what you have above into an SVG file.