SVG clippath for rectangular areas not working

giammi56 · October 9, 2021, 11:33am

Dear all,

I am experiencing an interesting behaviour of Writer and Draw. Importing this .svg file (I can’t upload it directly in this post), both software show a prolongation of the curve going outside the frame. The file has been created with Python 3.4 using the latest version of matplotlib.

In file preview (Ubuntu 20.04), Firefox/Edge(chromium), Inkscape and GIMP the prolongation is not shown (see below). I tried to use an MS product with another PC, but the version I have (e.g. MS Word 2016) doesn’t render SVG files (that’s absurd).

The behaviour is here summarized, opening the same file with two Draw (left) and Inkscape (right):

Well, I don’t know what to do apart from using the PNG version of the graph. Can someone confirm the behaviour? Any idea on how to proceed?

[EDIT] After a quick search on Bugzilla for LO, this is a bug occurring since 2016 and apparently still present.

ajlittoz · October 9, 2021, 12:41pm

Same here under Fedora 34, LO 7.1.6.2.0.

Just two remarks (because I am no expert in SVG):

your file does not specify point density
One of the apps I used (accidentally) objects on this and asks if it should use legacy 90 dpi or “modern” 96 dpi. This may eventually offset your clipping rectangle (but it should also offset or shrink/expand everything else the same).
the clipping rectangle for the curves is located at very end of the file and referenced as url(#xyz). This creates a forward reference and perhaps Draw doesn’t accept it. Clipping is ignored and you get curve overflows.

giammi56 · October 10, 2021, 10:23am

Thank you for your insights.

On matplotlib I force a 300 dpi resolution, but I don’t find evidence for it inside the svg.
I agree with your educated guess, there is even a previous post on the topic that I just found:

in summary, the <clipPath> is not sully supported by Draw (and therefore by LO, I assume), although the rectangular feature should be! You can try to recreate the proposed SVG example in the previously mentioned post and open it in Draw: it will show just a red square instead of three intersected red circles on a black background. The following code should work according to the standards because it makes use of rect, but it doesn’t.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="360px" height="510px"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Das clipPath-Element</title>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:36px;
            font-weight:bold; fill:white;}
      rect {fill:none; stroke:white; stroke-dasharray:5,2;}
    ]]>
    </style>

    <clipPath id="cp1">
       <rect height="54.6" width="54.6" x="8.464543" y="2.990036"/>
    </clipPath>
    <clipPath id="cp2">
       <rect height="54.6" width="54.6" x="48.464543" y="62.990036"/>
    </clipPath>
  </defs>

  <rect x="0" y="0" width="360" height="510"
    style="fill:black; stroke:none;" />
  <rect x="0" y="0" width="360" height="510"
    style="fill:red; stroke:none;" clip-path="url(#cp1)" />
  <rect x="0" y="0" width="360" height="510"
    style="fill:red; stroke:none;" clip-path="url(#cp2)" />

Any suggestion on how to force the rectangular clip?

Hrbrgr · October 10, 2021, 11:40am

This page here is the wrong place to report a bug.
If you want to report a bug, you can file it on Bugzilla.
How to Report Bugs in LibreOffice
Thank you.
Heading changed.

If you have entered a bug, please edit your initial question and share the link from the bug. Thank you.

giammi56 · October 10, 2021, 12:51pm

Thank you for your remark.