Hello,
using the following svg images I get a white image:
<svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg>
<svg height="80" width="300"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg>
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g> </svg>
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg>
result for all images:
the expected images should be:
only modifying the svg code for the first three images I get the desired result:
<svg height="80" width="300"> <g fill="none"> <path d="M5 20 l215 0" style="stroke:red;stroke-width:1"/> <path d="M5 40 l215 0" style="stroke:black;stroke-width:1"/> <path d="M5 60 l215 0" style="stroke:blue;stroke-width:1"/> </g> </svg>
<svg height="80" width="300"> <g fill="none" stroke="black"> <path d="M5 20 l215 0" style="stroke:black;stroke-width:2" /> <path d="M5 40 l215 0" style="stroke:black;stroke-width:4" /> <path d="M5 60 l215 0" style="stroke:black;stroke-width:6" /> </g> </svg>
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="6"> <path d="M5 20 l215 0" style="stroke:black;stroke-width:6" /> <path stroke-linecap="round" d="M5 40 l215 0" style="stroke:black;stroke-width:6" /> <path stroke-linecap="square" d="M5 60 l215 0" style="stroke:black;stroke-width:6" /> </g> </svg>
for the fourth I saw that the stroke-dasharray attribute is not supported.
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" style="stroke:black;stroke-width:4" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" style="stroke:black;stroke-width:4" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" style="stroke:black;stroke-width:4" /> </g> </svg>
The solution could be to use for example
ACanvas2d.lineStyle ([5.5]);
ACanvas2d.lineStyle ([10,10]);
ACanvas2d.lineStyle ([20,10,5,5,5,10]);
I tried, with a temporary change in:
`procedure TSVGPath.InternalDraw(ACanvas2d: TBGRACanvas2D; AUnit: TCSSUnit);
...
if not isStrokeNone then
begin
ACanvas2d.lineStyle([20,10,5,5,5,10]);
ApplyStrokeStyle(ACanvas2D,AUnit);
ACanvas2d.stroke;
end;
...
`
the repetition is correct but I do not understand the scale
with "ACanvas2d.lineStyle([10,5,2.5,2.5,2.5,5]);"
test path.zip
Thanks for every help