请问如何将sketch导出的svg文件作为svg注册到x6上？

[Superzzw1994]

const {markup, attrs} = Markup.xml2json(<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>xiaoxi-2</title> <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="工具栏/购物车" transform="translate(-351.000000, -17.000000)" fill="#000000" fill-rule="nonzero"> <g id="xiaoxi-2" transform="translate(351.000000, 17.000000)"> <path d="M35.9999975,18 C35.187,18 34.484,18.297 33.891,18.891 C33.298,19.485 33.001,20.188 32.9999975,21 C32.999,21.812 33.296,22.515 33.891,23.109 C34.486,23.703 35.189,24 35.9999975,24 C36.811,24 37.514,23.703 38.109,23.109 C38.704,22.515 39.001,21.812 38.9999975,21 C38.999,20.188 38.702,19.485 38.109,18.891 C37.516,18.297 36.813,18 35.9999975,18 Z M24,39 C22.344,39 20.6565,38.8125 18.9375,38.4375 L11.859,42.7035 L11.9535,35.7195 C9.2035,34.0635 7.024,31.9465 5.415,29.3685 C3.806,26.7905 3.0015,24.0015 3.0015,21.0015 C3.0015,17.7515 3.939,14.7435 5.814,11.9775 C7.689,9.2115 10.236,7.024 13.455,5.415 C16.674,3.806 20.1895,3.0015 24.0015,3.0015 C29.8145,3.0015 34.7675,4.7595 38.8605,8.2755 C42.9535,11.7915 45.0005,16.0335 45.0015,21.0015 C45.0025,25.9695 42.9555,30.2115 38.8605,33.7275 C34.7655,37.2435 29.8125,39.0015 24.0015,39.0015 L24,39 Z M24,0 C19.656,0 15.6405,0.9375 11.9535,2.8125 C8.2665,4.6875 5.3525,7.2345 3.2115,10.4535 C1.0705,13.6725 0,17.188 0,21 C0,24.25 0.8045,27.3045 2.4135,30.1635 C4.0225,33.0225 6.218,35.421 9,37.359 L9,48 L19.5,41.625 C21.031,41.875 22.531,42 24,42 C28.344,42 32.3595,41.0625 36.0465,39.1875 C39.7335,37.3125 42.6475,34.7655 44.7885,31.5465 C46.9295,28.3275 48,24.812 48,21 C48,17.188 46.9295,13.6725 44.7885,10.4535 C42.6475,7.2345 39.7335,4.6875 36.0465,2.8125 C32.3595,0.9375 28.344,0 24,0 Z M11.9999975,18 C11.187,18 10.484,18.297 9.891,18.891 C9.298,19.485 9.001,20.188 8.99999748,21 C8.999,21.812 9.296,22.515 9.891,23.109 C10.486,23.703 11.189,24 11.9999975,24 C12.811,24 13.514,23.703 14.109,23.109 C14.704,22.515 15.001,21.812 14.9999975,21 C14.999,20.188 14.702,19.485 14.109,18.891 C13.516,18.297 12.813,18 11.9999975,18 Z M23.9999975,18 C23.187,18 22.484,18.297 21.891,18.891 C21.298,19.485 21.001,20.188 20.9999975,21 C20.999,21.812 21.296,22.515 21.891,23.109 C22.486,23.703 23.189,24 23.9999975,24 C24.811,24 25.514,23.703 26.109,23.109 C26.704,22.515 27.001,21.812 26.9999975,21 C26.999,20.188 26.702,19.485 26.109,18.891 C25.516,18.297 24.813,18 23.9999975,18 Z" id="形状"></path> </g> </g> </g> </svg>)

//注册代码 Graph.registerNode('custom-svg', { inherit: 'empty', width: '100px', height: '100px', markup, attrs })
// 调用代码 dnd.start(graph.createNode({ shape:'custom-svg', }), e)

会报这个错误

请问下如何实现？
如果通过图片节点注册svg，是不是就不能更改svg的属性了？

[niemes]

Hi,

this doesn't looks like a valid JSON declaration :

• Check if your variable markup is a correct array.
• check if attrs is a valid JSON Object.

Try to update your declaration like this example : custom-node#custom-icon-with-svg

const customSvgData = {
    inherit: 'empty', 
    width: '100px', 
    height: '100px', 
    markup: markup, // or [markup]
    attrs: attrs
};

Graph.registerNode('custom-svg', customSvgData)

Concerning your question :

请问下如何实现？
如果通过图片节点注册svg，是不是就不能更改svg的属性了？

SVG is render in the HTML DOM, You should be able to style it directly using CSS selector 👍🏻 or JavaScript.
you can also change the attributes like this :

node.prop('attrs/path/in/object/' ,{fill: "red"})

Hope this help!

[Superzzw1994]

@NewByVector 大佬，帮忙看一下，谢谢

[NewByVector]

@niemes 的回答应该能解决你的问题