CODEWITHSUNDEEP
csshtml
user5638970
user5638970

Reputation:

SVG lines not visible

Fiddle here

<svg version="1.1">
  <line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>

If I give x1="0" and y1="0" then the lines become visible. Why is the line not visible in the code above?

Upvotes: 4

Views: 7717

Answers (2)

duhaime
duhaime

Reputation: 27611

I hit this same confusion because I had supplied fill, but not stroke to my lines. Adding a stroke attribute made them visible.

Upvotes: 3

Everettss
Everettss

Reputation: 16059

Add width and height to svg element (make sure that is big enough to cover your drawing) 

<svg version="1.1" width="1000" height="1000">
  <line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>

fiddle: https://jsfiddle.net/af5g1d3q/

Upvotes: 3

Related Questions