[Webkit-unassigned] [Bug 256708] New: SVG symbols wrong size and positionning

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri May 12 09:20:24 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=256708

            Bug ID: 256708
           Summary: SVG symbols wrong size and positionning
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Intel)
                OS: macOS 13
            Status: NEW
          Severity: Major
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: vincent.mulier at vivaxis.com
                CC: sabouhallawa at apple.com, zimmermann at kde.org

Created attachment 466335

  --> https://bugs.webkit.org/attachment.cgi?id=466335&action=review

Safari svg output

I faced a major issue in displaying accurately svg symbols that are then reused in the svg object.

Investigating this a bit I realized that even the simplest moz dev example was not displaying as expected. 

Symbols that are defined and then reused later in the svg object don't display with the right size and position compared with what was expected. Firefox and Chrome are displaying them as expected.

The issue is the same with Safari 16.3, 16.4, Latest Safari technology preview on both intel and apple platform

Here is the example:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230512/d06229c3/attachment.htm>


More information about the webkit-unassigned mailing list