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

[DiscoverForever]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• 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

1. open https://codepen.io/DiscoverForever/pen/zYagdLE
2. 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]

Is your SVG correct?

[DiscoverForever]

Is your SVG correct?

yes, chrome is working well

[DiscoverForever]

Is your SVG correct?

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

[DiscoverForever]

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

[stale]

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]

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]

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]

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