How to use Jointjs and SVG to draw element tools - javascript

I'm new to javascript and SVG and I have no graphical programming background and this is my first project using all of those. So I started to make a custom element just like Mike Goodwin answer proposed and I ended with this code after editing it:
joint.shapes.tools.tooledElement = joint.shapes.basic.Generic.extend({
toolMarkup: [
'<g class="element-tools">',
'<g class="element-tool-remove"><circle fill="red" r="11" stroke="black" stroke-width="1"/>',
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
'<title>Remove this element from the model</title>',
'</g>',
'<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>',
'<path transform="scale(.7) translate(-16, -16)"/>',
'<title>creates a new link</title>',
'</g>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
attrs: {
text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
Which works properly. Now I would like to draw some line on the green circle and to make the red circle into a red square. To achieve this I looked at this tutorial on paths to draw and this tutorial on basic shapes. But if I try to make a line on the green circle like this:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="x y L 10 10 " />'
it won't draw anything. They do say " If your cursor already was somewhere on the page, no line is drawn to connect the two places." and that's why I omitted the "M" from path.
So here comes the first question: How can I draw the line on the center of the green circle without starting from the previous last point defined on any other path?
To make the red square I tried the exactly example from the second tutorial changing the fill (as a test):
//first line to test
<rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>
or
//second line to test
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>
The result of the first line would be the element at which the tools are being used to be draw again above itself like this:
And the second line would end up on nothing being show.
So here are the next questions:
Why did the results from the first line got like that?
and
How can I change the red circle into any other shape?
UPDATE:
About the line draw:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'
If I use this code for example, this is the result:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'
If I use this other code then the result will be:
The tutorial led me to believe that M is defining the start point but changing the translate(-16, -16) to something else made the correct start point be possible. So its the translate attribute combined with M that set the starting point.


The first question as been answered on update. As for the second question (concerning the red square conflicting with the element shape inside a rect) this was my work around:
Use the path to draw the tools elements instead of using basic shapes, that way it won't conflict with the element shape.
Example:
'<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>',
'<path transform="scale(.7) translate(-16, -16)"/>',
'<title>creates a new link</title>',
'</g>'
would turn into:
'<g class="element-tool-link">',
'<path d="M33 0 a 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>',
'<path transform="scale(.7) " stroke="black" stroke-width="1" d="M58,16 H 37 "/>',
'<title>creates a new link</title>',
'</g>'
where '<path d="M33 0 a 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>' defines a circle shape.

Related

Get the content of an SVG string

Let's say that we have the following simple SVG element:
const svg = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M100 100C100 44.7715 55.2285 -1.95703e-06 0 -4.37114e-06L-4.37114e-06 100L100 100Z" fill="current"/>
</g>
</svg>`
The svg variable is a string and I want to extract all the child nodes from the svg (the <g> element for the specific example but can be more elements).
How can I do that without using a DOM manipulation library like JQuery?

Version 2
You can use str.split() to extract all the child elements from the <svg> as a string.
Working Example:
const svg = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M100 100C100 44.7715 55.2285 -1.95703e-06 0 -4.37114e-06L-4.37114e-06 100L100 100Z" fill="current"/>
</g>
</svg>`;
let g;
g = svg.split('xmlns="http://www.w3.org/2000/svg">')[1];
g = g.split('</svg>')[0];
g = g.trim();
console.log(g);
Version 1
I want to extract the content from the <svg> which is the
element inside it.
If I've understood correctly:
you want to extract only the <g> element
you know that the <svg> contains a <g> element
you know that there is only one <g> element
you can use str.split() to extract the <g> from the <svg>.
Working Example:
const svg = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M100 100C100 44.7715 55.2285 -1.95703e-06 0 -4.37114e-06L-4.37114e-06 100L100 100Z" fill="current"/>
</g>
</svg>`;
let g;
g = svg.split('<g ')[1];
g = g.split('</g>')[0];
g = '<g ' + g + '</g>'
console.log(g);

Either use JavaScripts built in DOMParser
var p= new DOMParser()
var d= p.parseFromString(svg,"text/html")
var g= d.querySelector("svg g")
OR make your own html/xml parser from scratch by looping through each character, checking for <, if found look for some letters next for the tag, if found look for other >, get all content in between for attributes, rinse and repeat

Paper JS only exporting <g> </g> element

So I create a paperjs path object and put it in a group:
let path = new paper.Path.Rectangle(originpoint, deviceWidth, deviceHeight);
let ret = new paper.Group();
ret.addChild(path);
And then I export the ret to SVG as follows:
let svg = ret.exportSVG({
asString:true
});
But the output of this is only coming as :
<g xmlns="http://www.w3.org/2000/svg" fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,85000v-85000h135000v85000z"/></g>
As you can notice there is no <svg> element here. How can I get the standard SVG header without having to manually splice it into the code. I'm obviously missing something because the project I am working on generates SVG's of whats displayed on the canvas with the <svg> elements with the following header:
<svg width="135mm" height="85mm" viewBox="0 0 135000 85000" xmlns="http://www.w3.org/2000/svg">
Im sure I'm missing some detail of how paper.js works, its seems like paper.js has specific objects that it puts into the svg container. Does anyone know what it is ? or What I might be doing wrong....
Thanks!

I am not a paper.js user or something but just playing around with the library I realized that exportSVG is inherited from paper prototype, so if you call it from current project paper.project then it seems to work as intended:
paper.setup(new paper.Size(300, 200));
let path = new paper.Path.Rectangle([0,0], 100, 100);
let ret = new paper.Group();
ret.addChild(path);
let svg = paper.project.exportSVG({
asString:true
});
console.log(svg);
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g><path d="M0,100v-100h100v100z"/></g></g></svg>
FIDDLE: https://jsfiddle.net/ibowankenobi/juem7f80/1/
Scroll to the bottom to see the snippet.

SVG HTML5 change pattern attributes in specific instance/usage only

I have a SVG Pattern which I use as fill in many other SVGs.
Of course, when I change attributes in the pattern afterwards, it is changed in every SVG using this pattern.
Is there a possibility to modify the pattern attributes in a specific instance/use only?
I would like to avoid creating the pattern in 100 different versions before.
EDIT with sample:
This is a sample pattern. I use this icon as fill for a circle on a country on a world map. The circle inside the pattern is used to set the background color.
<svg width="0" height="0">
<defs>
<pattern id="infantry_svg" patternUnits="objectBoundingBox" width="100% " height="100%">
<circle r="10" fill="transparent"></circle>
<path d="M 19.328,3.097 19.025,2.633 18.35,3.045 17.638,2.148 17.555,3.563 15.188,5.011 C 14.818,4.596 14.555,4.484 14.555,4.484 L 10.343,7.079 10.039,6.959 9.871,6.7 13.072,4.919 C 12.811,4.496 12.29,3.65 12.29,3.65 L 9.295,5.893 9.173,5.968 9.028,5.732 8.342,6.155 8.488,6.393 8.276,6.523 7.838,5.811 7.152,6.234 7.59,6.946 7.293,7.129 7.146,6.891 6.46,7.314 6.606,7.551 6.584,7.566 3.881,8.993 4.556,10.089 7.139,8.339 C 7.26,8.536 7.353,8.687 7.353,8.687 l -1.748,1.074 0.293,0.456 -0.373,1.185 -1.518,1.412 c 0,0 -2.772,1.469 -4.007,2.152 0.308,0.691 0.964,1.57 1.443,2.214 0,0 4.855,-4.879 6.706,-4.765 l 1.837,-1.136 c 0,0 -0.752,-0.704 -0.5,-0.864 1.583,1.752 3.062,1.704 3.062,1.704 0.442,-0.568 0.528,-1.221 0.78,-1.834 -1.195,-0.286 -1.226,-0.103 -2.25,-1.111 l 4.673,-2.88 C 15.821,6.048 15.48,5.467 15.48,5.467 l 3.848,-2.37 z m -9.83,8.165 -1.203,0.742 c 0,0 -0.281,-0.437 -0.435,-0.688 l 0.265,-0.16 c 0.168,0.165 0.502,0.417 0.834,0.213 l -0.124,-0.2 C 8.662,11.275 8.461,11.146 8.333,11.03 l 0.743,-0.453 0.422,0.685 z"
fill="#030104" transform="translate(1,1.1) scale(0.29)" stroke="white" stroke-width="0.4" />
</pattern>
</defs>
</svg>
Now when I set this pattern inside a circle on a country, it looks like this:
The circle on the country is generated like this with Snap.svg:
var circle = xs.circle(x, y, 4).attr({ id: "blabla", fill: "url(#infantry_svg)", stroke: "black", strokeWidth: 1 }).appendTo(xs.select('g'));
Directly after this, I set the background color of the pattern used for this circle:
$("#infantry_svg circle").attr({fill: troopOwner_color]});
Now every circle using "infantry_svg" pattern, has "troopOwner_color" as background color of the circle.
But I would like to change only this single instance of the pattern usage.

Whilst you can't do what you want with the specific requirement of the question, ie using a pattern. I'm not sure why you need to use a pattern.
Why not just use a 'use' element for the defs statement, and have a path & circle in there. Then you can just clone it and change the fill...
<defs>
<g id="infantry_svg" >
<circle cx="30" cy="30" r="40" stroke="red" stroke-width="5"/>
<path>path stuff</path>
</defs>
var g = s.g().use( Snap.select('#infantry_svg') );
var g1 = s.g( g ).attr({ fill: 'yellow' });
var g2 = g.clone().attr({ fill: 'blue', transform: 't200,0' })
var g2 = g.clone().attr({ fill: 'green', transform: 't100,0' })
jsfiddle
Just include the bits that don't change in the defs element, and create the bits that will be unique.

Can not set startOffset attribute on textpath with Snap.svg

I am trying to render text in the middle of an arc with Snap.svg.
This is possible with SVG like this:
<defs>
<path id="path1" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"/>
</defs>
<text text-anchor="middle">
<textPath xlink:href="#path1" startOffset="50%">
Text on a curved path
</textPath>
</text>
What I get is this (please ignore the specific coordinates):
<path d="M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3" id="path1"></path>
<text x="0" y="0" style="text-anchor: middle;">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1">
Lorem Ipsum
</textPath>
</text>
when I do this in Snap.svg:
var labelArc = paper
.path('M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3')
.attr('startOffset': '50%'});
paper
.text(0, 0, 'Lorem Ipsum')
.attr({
'text-anchor' : 'middle',
'textpath' : labelArc
});
The problem is that the startOffset attribute is not passed to the textpath.
Setting this attribute via CSS did not work either.
Am I doing something wrong or does it require some fancy workaround?

Ok, I figured out a way to do it...
Simply assign the text to a variable and set startOffset like so:
var label = paper
.text(0, 0, 'Lorem Ipsum')
.attr({
'text-anchor' : 'middle',
'textpath' : labelArc
});
label.textPath.attr({ startOffset: '50%' });
There might be a more elegant way of doing it, but this is at least working.

How to get exact amount of stroke-dasharray on circle and rect?

I am trying to figure out how an svg file works. I successfully found out the amount of stroke-dasharray of the path using JavaScript:
var path = document.querySelector(".aa")
path.getTotalLength();
When you checkout the svg file there are three elements. The first one is
a path, the second one is a rect, and the last is a circle.
The console keeps showing error messages on the rect and circle. Is there any solution for this?
Here is my original code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="imacSVG" x="0" y="0" viewBox="0 0 1800 1200" xml:space="preserve" enable-background="new 0 0 1800 1200">
<path d="M423.5 251.1c0 0 1.2-25.2 23.6-25.2 22.3 0 909.9 0.7 909.9 0.7s19.5-0.6 19.5 21.4 0 597 0 597 1.5 21.5-21.5 21.5 -909 0-909 0 -22.5-1.4-22.5-21.8C423.5 824.2 423.5 251.1 423.5 251.1z" class="aa"/>
<rect x="466.6" y="271.6" width="865.5" height="540" class="bb"/>
<circle cx="900.5" cy="246" r="8.2" class"cc"/>
</svg>

The getTotalLength() function is only available for <path> elements. You will need to find a different solution for the <rect> and <circle>.
Obviously, for the circle, you can use (2 * r * PI), and for the rect you can use (2 * (width + height)).

Categories

Resources