Convergence phenomenon in SVG when two distinct paths intersect

Working with individual SVG paths and in need of a mitre effect when there is a path join, which is a new concept for me.

The SVG shape resembles a polygon, with each side as its own individual path.

Although the sample SVG code provided does not display the original Polygon, please refer to the image for the output:

<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 link below shows the SVG polygon shape. When clicking on individual paths, the order of layers should change such that the path above overlaps the one beneath, creating the desired mitre effect. I have achieved this for two layers but still working on the mitre effect.

SVG Shape The second link demonstrates the transition for each mouse click. My goal is to achieve the miter/diagonal effect seen in the final figure.

Image 3 If it's a single SVG, then the mitre effect can be accomplished with line-join. How can I incorporate the desired mitre effect into this specific SVG structure?

javascriptsvgjquery-svg

Answer №1

To achieve the miter effect, it is recommended to utilize shapes instead of strokes. One way to do this manually is to visualize the miter as an isosceles right triangle with 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Observable not defined in facade pattern with RxJS

(After taking Gunnar's advice, I'm updating my question) @Gunnar.B Tool for integrating with API @Injectable({ providedIn: 'root' }) export class ConsolidatedAPI { constructor(private http: HttpClient) { } getInvestments(search?: ...

javascriptangulartypescriptrxjsarchitecture

How can I add scrolling functionality to the active list item with React?

I created a music player that allows users to search for songs by artist. Check out the CODE SANDBOX here! Take a look at how the SongsList component is structured in my project: const SongsList = (props) => { const { loading, errorMess ...

javascriptreactjsscrollbaraudio-player

Error with declaring TypeScript class due to private variable

When defining a TypeScript class like this: export class myClass { constructor(public aVariable: number) {} private aPrivateVariable: number; } and trying to initialize it with the following code: let someVar: myClass[] = [{ aVariable: 3 }, { aV ...

javascripttypescriptvisual-studio-code

Is there a way to properly direct to an internal page while utilizing [routerLink] and setting target="_blank" without triggering a full page reload?

I'm attempting to use [routerLink] along with target="_blank" to direct to an internal page without triggering a full app reload. Currently, the page opens in a new tab, but the whole application is refreshed. Here is the HTML: <a [routerLink]=" ...

javascriptangularhtmlangular6

Using Mongoose schema with a reference to an undefined 'ObjectID' data type

I am currently working on establishing relationships between my schemas, and I have encountered some issues with my solution. Here is how my device schema looks like: var deviceSchema = schema({ name : String, type : String, room: {type: mongo ...

javascriptnode.jsmongodbmongoose

Automatically update the div every few seconds and pause when it has loaded successfully

I am facing a challenge in creating a div that refreshes automatically every 10 seconds, but stops when it successfully loads. Here is the jQuery script I have developed: <script type="text/javascript"> $(document).ready(function(){ var j = jQuer ...

javascriptphpjqueryhtml

Manage YouTube video played within html code

I am working on a page that contains a YouTube video embedded in HTML. I am trying to find a way to stop the video when it is closed using the YouTube API, but so far my attempts have been unsuccessful. I have included SWFObject and jQuery in the code, yet ...

javascriptapiyoutube

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

javascriptjqueryhtmlcssjquery-mobile

Modify x and y axes in highcharts for stacked columns

Can anyone assist me in finding charts similar to the one shown below? I am interested in utilizing the stacked column charts provided by the highcharts library. However, I need to modify the presentation of the data values as demonstrated in the image. I ...

javascriptjquerygraphchartshighcharts

Can modifications be made to a page's source content variable using Ajax?

Can modifications be made to the source content of a page through Ajax loaded by a jsp include in the main jsp? If not, is it possible to refresh only that portion of the page (the jsp that loads some of the content) and have a portion of the content in t ...

javascriptjavajqueryajaxjsp

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...

javascriptphpjqueryajaxserialization

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know ...

javascripthtml

Receiving and transmitting messages repeatedly in Discord.JS

Currently, I am developing a simple bot. Interestingly, the bot seems to be responding multiple times to a single command. Here is the code snippet: const Discord = require('discord.js'); var bot = new Discord.Client(); const PREFIX = "+"; var ...

javascriptnode.jsdiscorddiscord.js

Utilizing JavaScript's Array.sort() method for sorting objects with varying properties

Currently, I am dealing with these specific Objects: let obj1 = { from: Date, to: Date } let obj2 = { date: Date } These Objects have been placed in an Array: let arr = [ obj1, obj2 ] My goal is to organize the objects within the array by using arr.sort( ...

javascripttypescriptsorting

Transform every key and value into an array

How can I separate each key and value into individual arrays? Here is the current data: var inputArray = { "3/10/2017": 52, "3/11/2017": 58, "3/12/2017": 70, "3/13/2017": 76 } The desired output should be: var outputArray = [ ["3/10/2017", 52 ...

javascriptarrays

Bypass the Array.reduce method in JavaScript

I'm currently working on finding an elegant solution to a toy example pattern. The goal is to stop the reduce algorithm immediately and return 0 when an element with a value of 0 is encountered, without processing the rest of the elements. let factor ...

javascriptfunctional-programmingshort-circuiting

Output the variables within a jade template

Is there a way to display a default value inside a textarea in my form using the code below? textarea(class="form-control", name="details") if restaurant.details #{restaurant.details} However, when the value (restaurant.details) is set, i ...

javascriptnode.jsexpresspugtemplate-engine

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

javascriptjqueryhtmlcssgoogle-visualization

The post method in Express.js is having difficulty parsing encoded data accurately

I'm currently working on an AngularJS code that sends a POST request like this: var req = { method: 'POST', url: 'http://localhost:3300/addInventoryItem', headers: { 'Content-Type': 'application/x-www-form- ...

javascriptangularjsnode.jsexpress

Forwarding images from a server to a client using socket.io and node.js

I am encountering an issue where I am trying to receive an image via socket.io in node.js and then forward it to a client (browser). However, the image sent through the message to the browser is not being recognized or displayed. Interestingly, if I save ...

javascriptnode.jswebsocketsocket.io