Mitre effect while two individual paths join in SVG - javascript

I am working with individual SVG paths and when there is a path join , need a mitre effect.Its quite new for me.
SVG shape looks like polygon , with each side as individual path.
Sample of my SVG code , does not display the original Polygon. Please see image for o/p:
<svg viewBox="0 0 330 330">
<g id="v-3" class="joint-viewport">
<g model-id="db69ee92-054d-4ce5-9300-ae09f385d9f2" id="j_1" class="joint-cell joint-type-custom joint-type-custom-line joint-element joint-theme-default" data-type="custom.Line" transform="translate(90,90)">
<g class="rotatable" id="v-12">
<g class="scalable" transform="scale(2.5,3.75)">
<path class="path0" id="v-13" d="M 0 0 L 30 0" stroke="#806476" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path1" id="v-14" d="M 30 0 L 30 20" stroke="#181972" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path2" id="v-15" d="M 30 20 L 60 20" stroke="#91a19b" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path3" id="v-16" d="M 60 20 L 60 40" stroke="#f24167" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path4" id="v-17" d="M 60 40 L 0 40" stroke="#21e578" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path5" id="v-18" d="M 0 40 L 0 0" stroke="#cf2fe0" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
</g>
</g>
</g>
</g>
</svg>
The below image link of SVG shows the polygon shape. When I click on individual paths , the intersection should change as first path over the second , second path over the first and then the mitre effect. I achieved the other two , but not the mitre effect.
SVG shape
The second image link shows the transition for each mouse click.I need to know the mitre/diagonal effect as shown in last figure.
Image 3
If its the single svg , then mitre effect can be done with line-join.
How to have the mitre effect here ?

In order to get the miter you need to use shapes instead of strokes. You can do it by hand if you think that the miter is an isosceles right triangle whose catheti = 15.
<svg viewBox="0 0 300 300" width="200">
<path id="_1" d="M50,50L150,50 135,65 65,65z" fill="#806476"/>
<path id="_2" d="M150,50L150,150 135,165 135,65z" fill="#181972"/>
<path id="_3" d="M150,150 L250,150 235,165 135,165z" fill="#91a19b" />
<path id="_4" d="M250,150L250,250 235 235 235 165z" fill="#f24167"/>
<path id="_5" d="M250,250L50,250 65,235 235 235z" fill="#21e578"/>
<path id="_6" d="M50,250L50,50 65,65 65,235z" fill="#cf2fe0" />
</svg>

Related

Add svg on exists path

I had an exsits path that represent line with arrow:
<path {...lineProps} id={id} />
it looks like:
is there a chance to add the next svg in the middle of the current link:
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>
it looks like:
eventually it should look like:
As #AKX commented you need to find the point in the middle of the path. You can do it using the getTotalLength and getPointAtLength methods.
As for the tag you can put it inside a symbol and use the symbol with <use>. The use element can take an x and y attributes, the x and y of the point in the middle of the path. In order to center the use element around the point you need also to translate the use element backward half width and height
//the path length
let l = thePath.getTotalLength();
//the point in the middle of the path
let p = thePath.getPointAtLength(l/2);
//set the x andy attributes in the middle of the path
theUse.setAttribute("x", p.x);
theUse.setAttribute("y", p.y);
<svg viewBox="0 0 300 200" width="300">
<symbol viewBox="0 0 32 18" fill="none" id="s">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</symbol>
<marker id="mk" viewBox="0 0 4 4" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto-start-reverse">
<polygon points="0,0 4,2 0,4" fill="black" />
</marker>
<path id="thePath" d="M10,10 L270,160" stroke="black" stroke-width="4" stroke-dasharray="5" marker-end="url(#mk)" />
<use id="theUse" xlink:href="#s" width="32" height="18" transform="translate(-16,-9)" />
<svg>

How do I animate a Svg path vertically?

Move.gif
I want to animate this path up and down (vertically). I use animationMotion for this, but my path is moving in different directions.
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2"
>
<animateMotion
path="M0,0 0 50 90 0 90 10"
begin="0s" dur="2s" repeatCount="indefinite"
/>
</path>
</svg>
Hope you got my point
You just need to give proper path for animateMotion. In your code it should be path="M0,0 0 90 0 0"
For more information, check this link
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2"
>
<animateMotion
path="M0,0 0 90 0 0"
begin="0s" dur="2s" repeatCount="indefinite"
/>
</path>
</svg>

Extracting a word from a string starting with a particular word till the end

I need to extract a particular attribute from an HTML element.
This is an SVG element and it has clip-path as an attribute. I need to replace the clip-path that comes with the html with my custom clip-path. How can i do that.
My outer HTML looks like this:
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
....
</svg>
</div>
I want to replace clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1/2/3...) from the entire HTML with clip-path="url(#ac_clip_1/2/3..)
Any heads up will be appreciated.
To retrieve the elements with the attribute, do .querySelectorAll('[clip-path]') on the containing element.
Then loop over all the elements and do .replace(/^.*#/, '#') on all the clip-path attribute values.
Demo
Details commented in demo
/*
Collect all <path>s -- that have the [clip-path] attribute that
has the value of "url" anywhere within it -- into a NodeList.
*/
var paths = document.querySelectorAll('path[clip-path*=url]');
/*
On each loop through the NodeList...
...use .setAttributeNS() to change the value of [clip-path]
attribute...
...and modify the value by incrementing the last char by index +1
*/
for (let i = 0; i < paths.length; i++) {
paths[i].setAttributeNS(null, 'clip-path', `url(#ac_clip_${(i + 1)})`);
console.log(`path#${paths[i].id}[clip-path="${ paths[i].getAttributeNS(null, 'clip-path')}"]`);
}
<p>Use Developer Tools to verify new [clip-path] values.</p>
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="70" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_3)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
</svg>
</div>
We can use setAttribute on the DOM.
getElementById
We can use getElementById if you want to do this on path's with a specific id.
document.getElementById("68").setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
getElementsByTagName
A more elegant solution would be to use getElementsByTagName to replace them all in case your replacement string is not unique. If your clip-paths have incremental id's you can use the index variable provided in the foreach to manipulate the replacement URL accordingly.
var allPaths = document.getElementsByTagName("path");
allPaths.forEach(function(element, index){
element.setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
});

SVG path is not proper when draw Arc using different angle

I am using HTML5 SVG and draw doughnut shape with different angle (90 and 120). But using angle 120, The doughnut path is not proper. This is my code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 1 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
JsFiddle
Let me know what i did mistake on this
Thanks,
Bharathi.
In your second path, the inner arc should be rotated:
A 94 94 45 1 0 754.4063879557373 295 z
Maybe someone more knowledgeable than me can explain the math behind it, and why it is like this...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 45 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

svg - draw hollow rectangle(rect donut)?

Can anybody help me with drawing hollow rectangle with svg WITHOUT using any js lib(e.g. Raphael)?
In basic, it should be same idea as "donut shape" but rectangle.
something like this:
Here you go
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2624 1462" width="1312" height="736" id="svg2">
<path d="M 80,112 l 528,0 0,528 -528,0 z m -64,-64.000003 656,0 0,656.000023 -656,0 z" fill="gold" stroke="black" fill-rule="evenodd" />
</svg>
The path winds in one direction outside and the other inside and the evenodd fill-rule cuts out the middle.
Here's an example:
<svg viewBox="0 0 400 400" shape-rendering="crispEdges">
<path d="M10,10h100v100h-100zM20,20v80h80v-80z" fill="yellow" stroke="black"/>
</svg>

Categories