CODEWITHSUNDEEP
htmlcssuser-interfacesvgfrontend
Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

SVG path not showing same diffrent browser

I am trying to create an SVG Button with a shape arrow, I am using path here my code, anyone suggest me to solve this problem

<svg height="100" width="300">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

Here my screenshot: enter image description here

Upvotes: 2

Views: 781

Answers (2)

lupz
lupz

Reputation: 3638

I added a css border to your svg and it reveals the following:

<svg height="100" width="300" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

The tip of your arrow gets cut of because the svg container is not big enough. That's because 280 + 50 is 330 and you are limiting the size of the svg to 300.

The fix is either decreasing the button size to 300 or increasing the svg containers size:

smaller button:

<svg height="100" width="300" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 250 0 l50 50 l-50 50 l-250 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

bigger container:

<svg height="100" width="330" style="border: 1px solid black;">
  <a href="#"><path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

Don't ask me what's going on with the IE. I guess it has different defaults for overflow, increases the element width along with the content or fits the svg to the container by decreasing its size.

Update:

I tested this with the IE. It looks like it is the overflow :). Also the IE-test revealed a small failure when I decreased your button width: I forgot to decrease the length line back to the left (l-280 0). I updated the snippet.

Upvotes: 6

jaydeep patel
jaydeep patel

Reputation: 917

Please try this SVG.

Hope this help.

 <svg height="100" width="300">
 <a href="#"><path id="lineAB" d='M0 1 l 250 0 l50 50 l-50 50 l-280 0 z' stroke="gray" stroke-width="2" fill="red" /></a>
</svg>

Upvotes: 1

Related Questions