search

elrumordelaluz / svgsprit.es

Public endpoint to generate SVG Sprites using svg-spreact
https://svgsprit.es
167 stars 21 forks source link

Gradient ID #9

Closed buzzclue closed 3 years ago

buzzclue commented 4 years ago

Hi There,

This is by far my most favorite generator.

If you have sprites with gradients fill then the generator converts the ID's and name all of them "a" which works in Firefox but not in Chrome.

Firefox Preview which shows correct gradient. image

Chrome Preview of same File. image

Now if I manually change the ID's Chrome works fine.

elrumordelaluz commented 4 years ago

Hi @buzzclue, thanks for open the Issue.

I am sorry for the delay. Do you have the Icons you used in order to debug the issue with them?

Thank!

buzzclue commented 4 years ago

Here are some SVG's with gradient, You can try generate sprite with them and test cross browser. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.034" height="76.874" viewBox="0 0 77.034 76.874">
  <defs>
    <linearGradient id="linear-gradient-3" x1="0.402" y1="-0.215" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#361cc1"/>
      <stop offset="1" stop-color="#2e82ef"/>
    </linearGradient>
  </defs>
  <path id="Path_7" data-name="Path 7" d="M44.629,1896.9c20.551-4.888,58.959,28.731,58.959,46.987s-53.043,34.067-67.837,28.142S24.078,1901.789,44.629,1896.9Z" transform="translate(-26.554 -1896.421)" fill="url(#linear-gradient-3)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.034" height="76.874" viewBox="0 0 77.034 76.874">
  <defs>
    <linearGradient id="linear-gradient-5" x1="0.402" y1="-0.215" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#7b2cbf"/>
      <stop offset="1" stop-color="#c77dff"/>
    </linearGradient>
  </defs>
  <path id="Path_7" data-name="Path 7" d="M44.629,1896.9c20.551-4.888,58.959,28.731,58.959,46.987s-53.043,34.067-67.837,28.142S24.078,1901.789,44.629,1896.9Z" transform="translate(-26.554 -1896.421)" fill="url(#linear-gradient-5)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.034" height="76.874" viewBox="0 0 77.034 76.874">
  <defs>
    <linearGradient id="linear-gradient-6" x1="0.402" y1="-0.215" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#264653"/>
      <stop offset="1" stop-color="#2a9d8f"/>
    </linearGradient>
  </defs>
  <path id="Path_7" data-name="Path 7" d="M44.629,1896.9c20.551-4.888,58.959,28.731,58.959,46.987s-53.043,34.067-67.837,28.142S24.078,1901.789,44.629,1896.9Z" transform="translate(-26.554 -1896.421)" fill="url(#linear-gradient-6)"/>
</svg>

image image image