Bug 150323 - SVG: marker-mid and marker-end not supported properly
Summary: SVG: marker-mid and marker-end not supported properly
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: LibreOffice (show other bugs)
Version:
(earliest affected)
6.3 all versions
Hardware: All All
: medium normal
Assignee: Xisco Faulí
URL:
Whiteboard: target:7.5.0 target:7.4.1
Keywords: filter:svg
Depends on:
Blocks:
 
Reported: 2022-08-09 21:35 UTC by Chameleon
Modified: 2022-08-13 18:00 UTC (History)
1 user (show)

See Also:
Crash report or crash signature:


Attachments
sample1 (2.19 KB, image/svg+xml)
2022-08-10 10:04 UTC, Xisco Faulí
Details
sample2 (526 bytes, image/svg+xml)
2022-08-10 10:05 UTC, Xisco Faulí
Details
Sample 1 ( LibreOffice 7.5 master vs firefox ) (56.08 KB, image/png)
2022-08-10 10:07 UTC, Xisco Faulí
Details
Test case with all problems described (619 bytes, image/svg+xml)
2022-08-11 09:39 UTC, Chameleon
Details
How SVG appears on different applications (369.20 KB, image/png)
2022-08-11 09:39 UTC, Chameleon
Details
How it looks in LibreOffice after my fix (19.86 KB, image/png)
2022-08-11 09:46 UTC, Xisco Faulí
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chameleon 2022-08-09 21:35:42 UTC
Description:
It seems that stroke-dasharray property does not work.

Also marker-end:url(#arrow) style does not work.

Also, it recognizes the deprecated <use xlink:href="#a" /> instead of currently used <use href="#a" />

OpenGL does not affect this.

Steps to Reproduce:
1.Insert an SVG image with that properties.
2.Open the same SVG with e.g. Inkscape or Edge
3.Some parts of SVG missing in LibreOffice.

Actual Results:
Some things are not rendered

Expected Results:
All things must be rendered


Reproducible: Always


User Profile Reset: No


OpenGL enabled: Yes

Additional Info:
Save this to an svg file, open it with LibreOffice and with Edge and with Inkscape. See the differences.


<?xml version="1.0"?>

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<circle id="aip" r="4" stroke="none" fill="black" />
</defs>

<style>
line.ai {stroke: gray; stroke-width: 1}
line.ait {stroke: red; stroke-width: 1}
rect {stroke: red; fill: #ccc; stroke-width: 3}
</style>


<rect x="20" y="20" width="450" height="450" />


<line class="ai" y1="20"  x2="470" x1="20" y2="20" />
<line class="ai" y1="70"  x2="470" x1="20" y2="70" />
<line class="ai" y1="120" x2="470" x1="20" y2="120" />
<line class="ai" y1="170" x2="470" x1="20" y2="170" />
<line class="ai" y1="220" x2="470" x1="20" y2="220" />
<line class="ai" y1="270" x2="470" x1="20" y2="270" />
<line class="ai" y1="320" x2="470" x1="20" y2="320" />
<line class="ai" y1="370" x2="470" x1="20" y2="370" />
<line class="ai" y1="420" x2="470" x1="20" y2="420" />
<line class="ai" y1="470" x2="470" x1="20" y2="470" />

<line class="ai" x1="20"  y2="470" y1="20" x2="20" />
<line class="ai" x1="70"  y2="470" y1="20" x2="70" />
<line class="ai" x1="120" y2="470" y1="20" x2="120" />
<line class="ai" x1="170" y2="470" y1="20" x2="170" />
<line class="ai" x1="220" y2="470" y1="20" x2="220" />
<line class="ai" x1="270" y2="470" y1="20" x2="270" />
<line class="ai" x1="320" y2="470" y1="20" x2="320" />
<line class="ai" x1="370" y2="470" y1="20" x2="370" />
<line class="ai" x1="420" y2="470" y1="20" x2="420" />
<line class="ai" x1="470" y2="470" y1="20" x2="470" />

<line class="ait" x1="220" y2="220" y1="270" x2="270" />
<line class="ait" x1="120" y2="170" y1="120" x2="170" />


<g id="row">
<use href="#aip" x="20" y="20" />
<use href="#aip" x="70" y="20" />
<use href="#aip" x="120" y="20" />
<use href="#aip" x="170" y="20" />
<use href="#aip" x="220" y="20" />
<use href="#aip" x="270" y="20" />
<use href="#aip" x="320" y="20" />
<use href="#aip" x="370" y="20" />
<use href="#aip" x="420" y="20" />
<use href="#aip" x="470" y="20" />
</g>

<use href="#row" y="50" />
<use href="#row" y="100" />
<use href="#row" y="150" />
<use href="#row" y="200" />
<use href="#row" y="250" />
<use href="#row" y="300" />
<use href="#row" y="350" />
<use href="#row" y="400" />
<use href="#row" y="450" />

</svg>
Comment 1 Chameleon 2022-08-09 21:38:08 UTC
Also try this

<?xml version="1.0"?>

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<marker style="overflow:visible;" id="bip" refX="0" refY="0" orient="auto">
	<path style="stroke: green" d="M 0,-3 v 6" />
</marker>
</defs>

<style>
path.boundary {stroke: red; fill: #ccc; stroke-width: 3; marker-mid: url(#bip); marker-end: url(#bip)}
</style>


<path class="boundary" d="m 20,20 v 90 90 90 90 90 h 90 90 90 90 90 v -90 -90 -90 -90 -90 h -90 -90 -90 -90 z" />

</svg>
Comment 2 Xisco Faulí 2022-08-10 10:04:46 UTC
Created attachment 181683 [details]
sample1
Comment 3 Xisco Faulí 2022-08-10 10:05:57 UTC
Created attachment 181684 [details]
sample2
Comment 4 Xisco Faulí 2022-08-10 10:07:14 UTC
Created attachment 181685 [details]
Sample 1 ( LibreOffice 7.5 master vs firefox )
Comment 5 Xisco Faulí 2022-08-10 10:10:30 UTC
The issue with sample1 was fixed in https://cgit.freedesktop.org/libreoffice/core/commit/?id=5169378d2a0f0a25013c8a4387a6e3cb1a4a55e9. The fix will be available in LibreOffice 7.3.6 or LibreOffice 7.4.0
Comment 6 Xisco Faulí 2022-08-10 10:18:26 UTC
Also reproduced in

Version: 6.2.0.0.alpha1+
Build ID: a20a2d7e0d28658f2d9089da076961a599833a28
CPU threads: 8; OS: Linux 5.10; UI render: default; VCL: gtk3; 
Locale: es-ES (es_ES.UTF-8); UI-Language: en-US
Calc: threaded
Comment 7 Xisco Faulí 2022-08-10 13:00:35 UTC
Patch in gerrit: https://gerrit.libreoffice.org/c/core/+/138090
Comment 8 Chameleon 2022-08-11 09:39:16 UTC
Created attachment 181722 [details]
Test case with all problems described

This is how Edge / GIMP / Firefox / Inkscape display the test case SVG and how the Libreoffice display the SVG
Comment 9 Chameleon 2022-08-11 09:39:54 UTC
Created attachment 181723 [details]
How SVG appears on different applications
Comment 10 Xisco Faulí 2022-08-11 09:46:56 UTC
Created attachment 181724 [details]
How it looks in LibreOffice after my fix
Comment 11 Commit Notification 2022-08-11 11:04:03 UTC
Xisco Fauli committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/cad5220c707ab7483e9146182e3353146ae24d41

tdf#150323: also add markers if there is a css style parent

It will be available in 7.5.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 12 Xisco Faulí 2022-08-11 11:08:43 UTC
Hi Chameleon,
Thanks for reporting this issue. If you find other svg related issue, please report them, I'll do my best to fix them. If possible, try them in master from https://dev-builds.libreoffice.org/daily/, before reporting them
Comment 13 Commit Notification 2022-08-13 18:00:33 UTC
Xisco Fauli committed a patch related to this issue.
It has been pushed to "libreoffice-7-4":

https://git.libreoffice.org/core/commit/2e1583b59816296e22b080809b2d9a8ef94b49cf

tdf#150323: also add markers if there is a css style parent

It will be available in 7.4.1.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.