[Bug]: loadSVGFromString loads svg files, linearGradient's x1 y1 x2 y2 does not support numeric type coordinates, but percentage does

DiscoverForever commented 1 year ago

CheckList

[X] I agree to follow this project's Code of Conduct
[X] I have read and followed the Contributing Guide
[X] I have read and followed the Issue Tracker Guide
[X] I have searched and referenced existing issues and discussions
[X] I am filing a BUG report.
[X] I have managed to reproduce the bug after upgrading to the latest version
[X] I have created an accurate and minimal reproduction

Version

5.2.4

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

14.18.0

Link To Reproduction

https://codepen.io/DiscoverForever/pen/zYagdLE

Steps To Reproduce

open https://codepen.io/DiscoverForever/pen/zYagdLE
Look at this demo，no gradient and shadow effects , not as expected。

Expected Behavior

Chrome preview this svg

Actual Behavior

Fabric preview this svg

Error Message & Stack Trace

## you can test this svg file，x1 y1 x2 y2 use percentage is working well。
<svg xmlns="http://www.w3.org/2000/svg" width="491" height="471">
  <defs>
    <linearGradient id="P" gradientUnits="userSpaceOnUse" />
    <linearGradient id="s1" x1="0" y1="0" x2="100%" y2="0" href="#P">
      <stop offset="0%" stop-color="rgb(0, 0, 0)" stop-opacity="1" />
      <stop offset="40%" stop-color="rgb(255, 0, 0)" stop-opacity="1" />
      <stop offset="100%" stop-color="rgb(255, 255, 255)" stop-opacity="1" />
    </linearGradient>
    <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="-20" dy="0" stdDeviation="8.3" flood-color="rgb(0, 0, 0)" flood-opacity="0.6" />
    </filter>
  </defs>
  <g id="L1_矩形_1_拷贝">
    <defs>
      <path id="M1_path" d="M306.9999 571 C306.9999 571,735 571,735 571 C735 571,735 999,735 999 C735
        999,306.9999 999,306.9999 999 C306.9999 999,306.9999 571,306.9999 571 Z" transform="translate(-266 -559)" />
      <mask id="M1_inner_stroke_mask">
        <use href="#M1_path" fill="rgb(255, 255, 255)" />
      </mask>
    </defs>
    <use href="#M1_path" fill="#ffffff" filter="url(#f2)" />
    <use href="#M1_path" fill="none" stroke="url(#s1)" stroke-width="20"
      mask="url(#M1_inner_stroke_mask)" />
  </g>
</svg>

ShaMan123 commented 1 year ago

Is your SVG correct?

DiscoverForever commented 1 year ago

Is your SVG correct?

yes, chrome is working well

DiscoverForever commented 1 year ago

Is your SVG correct?

Thanks for your reply, My operating system is mac os 12.1

DiscoverForever commented 1 year ago

Is your SVG correct? It is also normal to use the latest version of chrome with win11.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

asturur commented 1 year ago

There are 3 issues with this SVG and fabric.

SVG filters aren't supported
MASKs aren't supported
there is a bug with the HREF attribute on the gradient

The bug can be fixed, for masks we have a PR, but for the shadow that is a blur filter we didn't start and we didn't plan support yet.

asturur commented 1 year ago

The bug is that the href attribute on the gradient, should copy the properties of the referenced gradient, but is not doing it. The missing gradientUnits attribute is giving you black instead of the gradient.

DiscoverForever commented 1 year ago

There are 3 issues with this SVG and fabric.

SVG filters aren't supported

MASKs aren't supported

there is a bug with the HREF attribute on the gradient

The bug can be fixed, for masks we have a PR, but for the shadow that is a blur filter we didn't start and we didn't plan support yet.

Got it, Thasks for your reply

fabricjs / fabric.js