Svg.js Duplicate, Arrays, Merge
I'm new to SVG.js and to a concept in general, though I have a vector graphic background. So what I'm looking for is the understanding of the concept.
Duplicating, have found only the Array copy function, how to duplicate an object?
As an example:
element.rotate(45, 50, 50)
This rotates the element what if I want to keep a copy intact?
The Array itself. What is it? Doesn't looks like an Array in a graphic design program. What if I want simply to have a three raw array with five column of elements?
Merging. If I have an arc and line could I merge them to a path? Then rotate around an endpoint their copy and merge again to have the nice corners?
Maybe I ask too much but as a newcomer, I need some push forward.
arrays merge copy svg.js
add a comment |
I'm new to SVG.js and to a concept in general, though I have a vector graphic background. So what I'm looking for is the understanding of the concept.
Duplicating, have found only the Array copy function, how to duplicate an object?
As an example:
element.rotate(45, 50, 50)
This rotates the element what if I want to keep a copy intact?
The Array itself. What is it? Doesn't looks like an Array in a graphic design program. What if I want simply to have a three raw array with five column of elements?
Merging. If I have an arc and line could I merge them to a path? Then rotate around an endpoint their copy and merge again to have the nice corners?
Maybe I ask too much but as a newcomer, I need some push forward.
arrays merge copy svg.js
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06
add a comment |
I'm new to SVG.js and to a concept in general, though I have a vector graphic background. So what I'm looking for is the understanding of the concept.
Duplicating, have found only the Array copy function, how to duplicate an object?
As an example:
element.rotate(45, 50, 50)
This rotates the element what if I want to keep a copy intact?
The Array itself. What is it? Doesn't looks like an Array in a graphic design program. What if I want simply to have a three raw array with five column of elements?
Merging. If I have an arc and line could I merge them to a path? Then rotate around an endpoint their copy and merge again to have the nice corners?
Maybe I ask too much but as a newcomer, I need some push forward.
arrays merge copy svg.js
I'm new to SVG.js and to a concept in general, though I have a vector graphic background. So what I'm looking for is the understanding of the concept.
Duplicating, have found only the Array copy function, how to duplicate an object?
As an example:
element.rotate(45, 50, 50)
This rotates the element what if I want to keep a copy intact?
The Array itself. What is it? Doesn't looks like an Array in a graphic design program. What if I want simply to have a three raw array with five column of elements?
Merging. If I have an arc and line could I merge them to a path? Then rotate around an endpoint their copy and merge again to have the nice corners?
Maybe I ask too much but as a newcomer, I need some push forward.
arrays merge copy svg.js
arrays merge copy svg.js
asked Nov 15 '18 at 12:07
Dmitriy KarpovichDmitriy Karpovich
3619
3619
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06
add a comment |
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06
add a comment |
2 Answers
2
active
oldest
votes
The clone()
method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform
attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
add a comment |
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>
, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319169%2fsvg-js-duplicate-arrays-merge%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The clone()
method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform
attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
add a comment |
The clone()
method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform
attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
add a comment |
The clone()
method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform
attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
The clone()
method is your friend if you want to copy shapes.
You can read through the docs at svgjs.com to learn more.
For merging: No, that is not possible with svg.js albeit not impossible in general.
Its just that nobody requested this feature until now or nobody had the time to put their brain capacity into it to solve it.
There is a chance, that it gets considered, when you open a new issue and request that feature.
There is one problem with your idea though
// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">
// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">
// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">
// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">
As you can see, rotating your path does not change the values of the d-attr. Rotation is a transformation which is done with the transform
attribut. So you cannot easily merge these 2 paths together. Instead you first have to get rid of the transformation and apply it to every point directly. Then you can merge.
This ofc is again possible but maybe not something someone implemented already.
It would make a cool plugin, though...
answered Nov 17 '18 at 6:51
FuzzymaFuzzyma
3,18821539
3,18821539
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
add a comment |
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Thank you, the transformation is an absolutely new conception for me. Do not understand why it is there under the hood anyway there are somewhere the absolute coordinates.
– Dmitriy Karpovich
Nov 17 '18 at 15:09
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Transformation is the most powerful tool in every graphical environment. You certainly know it from every image editing program. It's far easier to just take a shape and reuse it for multiple transformations or undo the transformation, stack transformations and so on. Changing all (possibly hundreds) of coordinates instead is a waste of Ressources
– Fuzzyma
Nov 17 '18 at 15:13
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
Speaking about clone there is "use" as well looks like it is better but I have no idea how to apply multiple transformation in this case codesandbox.io/s/pmqv6vxvw0
– Dmitriy Karpovich
Nov 17 '18 at 15:18
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You would transform the use element itself. You might want considering reading up about svg before using svg. js. That will make a lot of things more clear
– Fuzzyma
Nov 17 '18 at 15:26
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
You now, I have used to use the Grasshopper before. You always could get actual coordinates in there, I have expected the same level of abstraction from a js framework. For my naive point of view having under the hood pure geometrycal engine better than keeping in memory the same copy of the oddly described graphics. Anyway you of course right I have to learn before but you know when someone didn't get something fundamental reading documentation useless. This is what I'm trying to do, to get the basics.
– Dmitriy Karpovich
Nov 18 '18 at 18:57
add a comment |
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>
, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
add a comment |
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>
, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
add a comment |
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>
, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
Answering my own question if someone one day needed this.
First of all the SVG.js and its kinds do not work with geometry they work with SVG. Learn SVG first than decide whether do you need them or not. In my case, Vue will do work simpler.
As for others:
Duplicating - all that the SVG provides in my case mostly <use>
, but be careful with styles they are unchangeable.
Arrays - no such thing not as in a CG graphics editor, you should program them yourself. As I sad SVG.js only help you with SVG not with geometry
Merging - theoretically possible but there is no out of the box solution.
answered Dec 12 '18 at 12:09
Dmitriy KarpovichDmitriy Karpovich
3619
3619
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319169%2fsvg-js-duplicate-arrays-merge%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I've found clone method svgjs.com/docs/2.7/classes/#clone
– Dmitriy Karpovich
Nov 15 '18 at 12:51
There is an experiment of mine codesandbox.io/s/pmqv6vxvw0 everything are in the HelloWorld.vue drawPath() method. What I want now is to fill the shape and to populate it as check board
– Dmitriy Karpovich
Nov 15 '18 at 13:25
I have studied the topic a bit deeper looks like Merging is just impossible
– Dmitriy Karpovich
Nov 16 '18 at 8:06