How can I add radial gradient in SwiftUI using provided SVG file?
All I have got is below SVG file which has gradient inforamtion:
<defs>
<clipPath id>
<path d="M1890, 0 L1890, 888 L0, 888 L0, 0L1890, 0 Z" />
</clipPath>
<radialGradient id: "grad1" cx = "0px" cy = "0px" r = "1000px" gradientTransform = "scale(1.0.0.56)" gradientUnits="userSpaceOnUse">
<stop stop-color = "rgba(0,0,0,0.6)" offset="0%" />
<stop stop-color = "rgba(0,0,0,0)" offset="100%" />
</radialGradient>
<clipPath id>
<path d="0, 0 1890, 0 1890, 888 0, 888 0, 0" />
</clipPath>
</defs>
My SwiftUI code has image which needs above gradient:
Image(room.thumbnailImage)
.resizable()
.frame(maxWidth: 400, maxHeight: 140.0)
Not later than yesterday, I managed to make an animated SVG which works flawlessly in Chrome. I tried to open it in Safari today and the animation was not working. Is there a solution to this? I have tried to do some research but most of them show CSS3 and the d:path CSS method does not work either and is actually worse because nothing shows up.
Here's my code
<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
<path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z"
fill="#000000">
<!-- First shape and last shape in values are the same -->
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="12s"
values="
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
">
</animate>
</path>
</svg>
I have tried to do some research but most of them show CSS3 and the
d:path CSS method does not work either and is actually worse because
nothing shows up.
Please see browser support d: path animations.
Unfortunately, this does not work in the specified browsers, including Safari.
Let's hope to see better support in the near future.
This answer will not solve your problem with CSS3 path animations as it is not possible, but it will make it easier with SVG animations that work in all modern browsers, including Safari.
Specifying path data: the d property:
For animation, two d property values can only be interpolated smoothly
when the path data strings contain have the same structure, (i.e.
exactly the same number and types of path data commands which are in
the same order). If an animation is specified and the lists of path
data commands do not have the same structure, then the values must be
interpolated using the discrete animation type.
To fulfill these requirements, you can use this technique
Step #1
First you need to get the shape of the curve at the starting position:
Step #2
Then, by moving the anchor points of the curve in the vector editor, we get the final shape of the curve:
Step #3
Next, we write a command to animate the curve:
<animate attributeName="d" values="path1;path2;path1" />, where
path1 - Curve shape at the start
path2 - Finish curve shape
as #Kaiido said in the comments try not to allow extra spaces before the semicolon
svg {
width:40%;
height:40%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:4;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="770" height="770" viewBox="0 0 770 770" preserveAspectRatio="xMinYMin meet" >
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate attributeName="d"
dur="4s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="indefinite"
/>
</path>
</svg>
Option with background image and shadow
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
-webkit-filter: drop-shadow(4px 4px 1px black);
filter: drop-shadow(4px 4px 1px black);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatCount="indefinite"
/>
</path>
</svg>
</div>
Border animation plus whole block size animation
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<defs>
<filter id='shadow'>
<feGaussianBlur in='SourceAlpha' stdDeviation='2' />
<feOffset dx='3' dy='3' result='blur' />
<feMerge>
<feMergeNode in='blur' />
<feMergeNode in='SourceGraphic' />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path filter="url(#shadow)" d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s;an_t.end"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="1"
/>
<animateTransform id="an_t" attributeName="transform" type="scale" dur="12s" begin="an_d.end" values="1;0.5;0.5;1" />
</path>
</svg>
</div>
How do i transform/rotate(?) the right side of these SVG blocks to appear more the back?
The right side of the tiles should not be higher but more to the back giving it more dept.
This is my SVG.
width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345" style="enable-background:new 0 0 1250.574 350.574;"
xml:space="preserve">
<g>
<path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
</svg> ```
I don't know what you mean by
The right side of the tiles should not be higher but more to the back giving it more dept.
when that appears to be exactly what you have drawn.
You can reproduce your drawing using a skewY() transform.
<svg version="1.1" id="scgblocks" xmlns="http://www.w3.org/2000/svg"
width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345">
<g transform="skewY(-9)">
<g>
<path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
</g>
</svg>
Is that what you wanted?
However, if instead you mean that you want it to have perspective, then you need to do it a slightly different way. You can't use perspective transforms (yet) inside an SVG, but perspective transforms are allowed on HTML elements. So, as long as the SVG is in an web page, then you can apply a perspective transform to the entire <svg> element because browsers treat top level <svg> elements like other HTML elements.
svg {
transform: perspective(1800px) rotateY(50deg);
}
<svg version="1.1" id="scgblocks" xmlns="http://www.w3.org/2000/svg"
width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345">
<g>
<path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
<path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
<path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
</svg>
I am attempting to produce an SVG image from the package RDKit. A minimum reproducable example:
from rdkit import Chem
from rdkit.Chem import Draw
img = Draw.MolsToGridImage([Chem.MolFromSmiles(x) for x in ['C', 'CO', 'CN']], useSVG = True)
print(img)
The output is below, but doesn't render any image in any browser or image viewer I have tried. Is this a valid SVG file, or is the package producing an invalid format? Or is there some other error I cannot see?
<?xml version='1.0' encoding='iso-8859-1'?>
<svg version='1.1' baseProfile='full'
xmlns='http://www.w3.org/2000/svg'
xmlns:rdkit='http://www.rdkit.org/xml'
xmlns:xlink='http://www.w3.org/1999/xlink'
xml:space='preserve'
width='600px' height='200px' >
<!-- END OF HEADER -->
<rect style='opacity:1.0;fill:#FFFFFF;stroke:none' width='600' height='200' x='0' y='0'> </rect>
<text x='0' y='200' style='font-size:0px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;text-anchor:start;fill:#000000' ><tspan>CH</tspan><tspan style='baseline-shift:sub;font-size:0px;'>4</tspan><tspan></tspan></text>
<path class='bond-0' d='M 200,200 200,200' style='fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
<path class='bond-0' d='M 200,200 200,200' style='fill:none;fill-rule:evenodd;stroke:#FF0000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
<text x='200' y='200' style='font-size:0px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;text-anchor:start;fill:#FF0000' ><tspan>OH</tspan></text>
<path d='M 200,200 200,200 200,200 200,200 200,200' style='fill:none;stroke:#FF0000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
<path class='bond-0' d='M 400,200 400,200' style='fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
<path class='bond-0' d='M 400,200 400,200' style='fill:none;fill-rule:evenodd;stroke:#0000FF;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
<text x='400' y='200' style='font-size:0px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;text-anchor:start;fill:#0000FF' ><tspan>NH</tspan><tspan style='baseline-shift:sub;font-size:0px;'>2</tspan><tspan></tspan></text>
<path d='M 400,200 400,200 400,200 400,200 400,200' style='fill:none;stroke:#FF0000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' />
</svg>
RDKit is for an unknown reason producing SVG code which doesn't show anything. However, changing the list of molecules does result in SVG code which produces a visible image.
This works:
from rdkit import Chem
from rdkit.Chem import Draw
img = Draw.MolsToGridImage([Chem.MolFromSmiles(x) for x in ['C', 'CO', 'CN', 'CCC']], useSVG = True)
print(img)
A bug has been opened here: https://github.com/rdkit/rdkit/issues/2641
Im trying to make a logo in SVG, and for that purpose, I need to do mirroring. Im using negative scale transformation on my path, but when I do it simply disappear ...
<svg width="1024" height="1024">\
<g transform="scale(.5)">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
<stop offset="100%" style="stop-color:white;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)" stroke="#89898C" stroke-width="4" />
<path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)" transform="translate(200, 0) scale(-1, 1)" />
</g>
</svg>
Here js fiddle : https://jsfiddle.net/5bbd4r12/
I tried some other examples and it seems to work with non cubic curves ...
Thanks for the help, i'm kinda pulling my hair off on this one haha
It's off the canvas (too far to the left) so you can't see it. I've increased the translate so you can see it.
<svg width="1024" height="1024">
<g transform="scale(.5)">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
<stop offset="100%" style="stop-color:white;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)" stroke="#89898C" stroke-width="4" />
<path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)" transform="translate(450, 0) scale(-1, 1)" />
</g>
</svg>