3

I have created a bar graph using svg. There are few horiztonal rulers which are basically svg line with black stroke. Issue is as below

  • The horizontal rulers disappear when zoom is 75% or 25%.
  • The horizontal rulers dont disappear in other browsers
  • The horizontal rulers dont disappear when they are rotated and made vertical.

Observations:

  1. If initial zoom is 75% and then you zoom out or zoom in then the lines appear
  2. But when the zoom again is equal or 75% or 25% then the lines disappear

Jsbin Link

Images for reference: enter image description here
and the one with issue: enter image description here

wallop
  • 2,510
  • 1
  • 22
  • 39

1 Answers1

1

What's the reason to apply external schema? If you replace horizontal line declaration with the following code it survives zoom out

      <line x1="0" y1="0" x2="100%" y2="0" class="black-line"></line>   
      <line x1="0" y1="20%" x2="100%" y2="20%" class="black-line"></line>   
      <line x1="0" y1="40%" x2="100%" y2="40%" class="black-line"></line>   
      <line x1="0" y1="60%" x2="100%" y2="60%" class="black-line"></line>   
      <line x1="0" y1="80%" x2="100%" y2="80%" class="black-line"></line>   
      <line x1="0" y1="100%" x2="100%" y2="100%" class="black-line"></line>
Kirill Slatin
  • 6,085
  • 3
  • 18
  • 38
  • yeah i thought that would work but i didn try : ) Your answer definitely solves my problem but does not answer why it doesn show in chrome! So upvote for that : ) Thanks tho :) – wallop Jun 01 '15 at 06:37
  • i think every browser has troubles when rendering that xlink. For example IE 11 renders differnet width dependant on size on container (not zoom) and also hies these lines when zoom is 35% – Kirill Slatin Jun 01 '15 at 06:53
  • Not true! If i use rect instead of line then it renders just fine. The issue is just with line. http://jsbin.com/vazuxu/6/edit – wallop Jun 01 '15 at 07:08
  • I am not saying about all xlink templates. I am talking about `hor-line` – Kirill Slatin Jun 01 '15 at 08:36
  • Btw, i've tried the xlink `rect` and doesn't behave much better. On 90% and 50% it doesn't have the top border in Chrome – Kirill Slatin Jun 01 '15 at 08:37
  • hmmm top-border! again related to horizontal line! – wallop Jun 01 '15 at 09:19
  • Btw not true in my case, both 90% and 50% appear fine! – wallop Jun 01 '15 at 09:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79306/discussion-between-kirill-slatin-and-wishy). – Kirill Slatin Jun 01 '15 at 10:58