Search code examples
javascriptsvgjquery-svg

Mitre effect while two individual paths join in SVG

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 ?

Solution

  • 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>