Open
Description
I am testing out the package on a simple SVG file I created (see below, REF1) and the Xcode preview is showing the shape black, instead of the linear gradient as expected.
I am doing a side by side comparison, with no gradient (simple yellow fill color) next to a version with the linear gradient applies, and one with radial. The filled shape is displayed properly, the linear gradient appears as a black fill, and the radial gradient appears as a black will and a message in the console SVG parsing error. No oval radial gradients supported. Here is the results:
Filled shape
SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.01812,0,0,1.01812,2.37319,4.97727)">
<path id="background" d="M145,10L174.347,57.678L219.581,45.348L221.833,92.178L276.246,105.356L239.97,148L265.674,187.209L221.833,203.822L226.114,259.644L174.347,238.322L145,274.885L115.653,238.322L63.886,259.644L68.167,203.822L24.326,187.209L50.03,148L13.754,105.356L68.167,92.178L70.419,45.348L115.653,57.678L145,10Z" style="fill:rgb(255,207,87);"/>
</g>
<g transform="matrix(0.72449,0,0,0.965986,40.6018,15.7065)">
<path id="heart" d="M151,92.4C171.632,63 212.895,63 233.526,77.7C254.159,92.4 254.159,121.8 233.526,151.2C219.084,173.25 181.947,195.3 151,210C120.053,195.3 82.916,173.25 68.474,151.2C47.842,121.8 47.842,92.4 68.474,77.7C89.105,63 130.368,63 151,92.4Z" style="fill:rgb(255,87,87);"/>
</g>
</svg>
Linear gradient
SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.01812,0,0,1.01812,2.37319,4.97727)">
<path id="background" d="M145,10L174.347,57.678L219.581,45.348L221.833,92.178L276.246,105.356L239.97,148L265.674,187.209L221.833,203.822L226.114,259.644L174.347,238.322L145,274.885L115.653,238.322L63.886,259.644L68.167,203.822L24.326,187.209L50.03,148L13.754,105.356L68.167,92.178L70.419,45.348L115.653,57.678L145
6AFD
,10Z" style="fill:url(#_Linear1);"/>
</g>
<g transform="matrix(0.72449,0,0,0.965986,40.6018,15.7065)">
<path id="heart" d="M151,92.4C171.632,63 212.895,63 233.526,77.7C254.159,92.4 254.159,121.8 233.526,151.2C219.084,173.25 181.947,195.3 151,210C120.053,195.3 82.916,173.25 68.474,151.2C47.842,121.8 47.842,92.4 68.474,77.7C89.105,63 130.368,63 151,92.4Z" style="fill:rgb(255,87,87);"/>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(262.492,0,0,264.885,13.754,142.442)"><stop offset="0" style="stop-color:rgb(0,29,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,207,87);stop-opacity:1"/></linearGradient>
</defs>
</svg>
Radial gradient
SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.01812,0,0,1.01812,2.37319,4.97727)">
<path id="background" d="M145,10L174.347,57.678L219.581,45.348L221.833,92.178L276.246,105.356L239.97,148L265.674,187.209L221.833,203.822L226.114,259.644L174.347,238.322L145,274.885L115.653,238.322L63.886,259.644L68.167,203.822L24.326,187.209L50.03,148L13.754,105.356L68.167,92.178L70.419,45.348L115.653,57.678L145,10Z" style="fill:url(#_Radial1);"/>
</g>
<g transform="matrix(0.72449,0,0,0.965986,40.6018,15.7065)">
<path id="heart" d="M151,92.4C171.632,63 212.895,63 233.526,77.7C254.159,92.4 254.159,121.8 233.526,151.2C219.084,173.25 181.947,195.3 151,210C120.053,195.3 82.916,173.25 68.474,151.2C47.842,121.8 47.842,92.4 68.474,77.7C89.105,63 130.368,63 151,92.4Z" style="fill:rgb(255,87,87);"/>
</g>
<defs>
<radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(262.492,0,0,264.885,13.754,142.442)"><stop offset="0" style="stop-color:rgb(0,29,255);stop-opacity:1"/><stop offset="0.35" style="stop-color:rgb(0,83,249);stop-opacity:1"/><stop offset="0.68" style="stop-color:rgb(0,255,230);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,207,87);stop-opacity:1"/></radialGradient>
</defs>
</svg>
My suggestion
Please fix the issue by adding proper support for linear gradients, OR add a message in the documentation and console to indicate that linear gradients are not supported.
Thank you.
Metadata
Metadata
Assignees
Labels
No labels