0

I have the following two groups of lines with the same length (700 each). The first group starts at (500, 500) and ends on (1200, 500), and the second group starts at (1000, 500) and ends at (1700, 500) so that the second group is overlapped on the first one (at 5/7 of the length of the first group). Although both groups have exactly the same attributes (such as stroke-width and scaling factor), my eyes can see the overlapping area very clearly. Can any one help me understand why is this overlapping area so obvious to see (which is very disturbing). Here is the code:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="793.7008" height="1122.5197" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g transform="scale(0.04)" stroke-linecap="butt" stroke-dasharray="" stroke="black" stroke-width="10">
  <line x1="500.0" y1="500.0" x2="1200.0" y2="500.0"/>
  <line x1="500.0" y1="550.0" x2="1200.0" y2="550.0"/>
  <line x1="500.0" y1="600.0" x2="1200.0" y2="600.0"/>
  <line x1="500.0" y1="650.0" x2="1200.0" y2="650.0"/>
  <line x1="500.0" y1="700.0" x2="1200.0" y2="700.0"/>
 </g>
 <g transform="scale(0.04)" stroke-linecap="butt" stroke-dasharray="" stroke="black" stroke-width="10">
  <line x1="1000.0" y1="500.0" x2="1700.0" y2="500.0"/>
  <line x1="1000.0" y1="550.0" x2="1700.0" y2="550.0"/>
  <line x1="1000.0" y1="600.0" x2="1700.0" y2="600.0"/>
  <line x1="1000.0" y1="650.0" x2="1700.0" y2="650.0"/>
  <line x1="1000.0" y1="700.0" x2="1700.0" y2="700.0"/>
 </g>
</svg>

Here is a photo of the rendering by Inkscape:

enter image description here

and as rendered by Firefox:

enter image description here

5
  • It's almost assuredly rendering error because of having such a tiny scale applied to them. You should remove those transforms in a vector editor and see if the problem remains. – Zach Saucier Nov 26 '19 at 22:22
  • Are you talking about transform="scale(0.04)"? But what if i need such tiny scalings (or even more tiny!)? – Student Nov 26 '19 at 22:30
  • Just size them that small. In a vector editor you can open up the SVG output and delete the transform and it won't increase their size, it will just resize the elements to that size. – Zach Saucier Nov 27 '19 at 15:30
  • I can't quite follow. Can you depict the workflow you suggest in Inkscape. Should i delete the transformations from the svg file, and the lines aren't resized? – Student Nov 27 '19 at 16:24
  • Yes. stackoverflow.com/a/24180005/2065702 – Zach Saucier Nov 27 '19 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.