Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An idea to round/rewrite elements with gradient #2020

Open
KrasnayaPloshchad opened this issue Jun 3, 2024 · 0 comments
Open

An idea to round/rewrite elements with gradient #2020

KrasnayaPloshchad opened this issue Jun 3, 2024 · 0 comments

Comments

@KrasnayaPloshchad
Copy link

KrasnayaPloshchad commented Jun 3, 2024

Is your feature request related to a problem? Please describe.
I just found out a way to round/rewrite elements with gradient effect to make them effectively reduce their code length.

Describe the solution you'd like
If an element applied gradient, which has gradientTransform property, both two should be rewritten as well, just similar to #1882. For example

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139">
  <defs>
    <radialGradient id="a" cx="0" cy="0" r="1" fx="0" fy="0" gradientTransform="matrix(69.347421 0 0 -69.347421 396.29534 292.68055)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
      <stop offset="0" stop-color="#7898c9"/>
      <stop offset=".0935961" stop-color="#7898c9"/>
      <stop offset=".807882" stop-color="#133a73"/>
      <stop offset="1" stop-color="#133a73"/>
    </radialGradient>
  </defs>
  <path fill="url(#a)" d="M326.947 292.679c0-38.299 31.048-69.346 69.348-69.346 38.301 0 69.348 31.047 69.348 69.346 0 38.3-31.047 69.349-69.348 69.349-38.3 0-69.348-31.049-69.348-69.349m22.414 0c0 25.923 21.013 46.935 46.934 46.935 25.921 0 46.933-21.012 46.933-46.935 0-25.92-21.012-46.933-46.933-46.933s-46.934 21.013-46.934 46.933" transform="matrix(1 0 0 -1 -326.795 362.1805)"/>
</svg>

This should be rewritten as this to make codes simpler but still has proper appearence:

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139">
  <defs>
    <radialGradient id="a" cx="0" cy="0" r="1" fx="0" fy="0" gradientTransform="matrix(69.347421 0 0 -69.347421 69.50034 69.49995)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
      <stop offset="0" stop-color="#7898c9"/>
      <stop offset=".0935961" stop-color="#7898c9"/>
      <stop offset=".807882" stop-color="#133a73"/>
      <stop offset="1" stop-color="#133a73"/>
    </radialGradient>
  </defs>
  <path fill="url(#a)" d="M.152 69.5015c0 38.299 31.048 69.346 69.348 69.346 38.301 0 69.348-31.047 69.348-69.346 0-38.3-31.047-69.349-69.348-69.349C31.2.1525.152 31.2015.152 69.5015m22.414 0c0-25.923 21.013-46.935 46.934-46.935 25.921 0 46.933 21.012 46.933 46.935 0 25.92-21.012 46.933-46.933 46.933s-46.934-21.013-46.934-46.933"/>
</svg>

Describe alternatives you've considered
N/A

Additional context
N/A

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant