fy
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
The fy
attribute defines the y-axis coordinate of the focal point for a radial gradient.
You can use this attribute with the following SVG elements:
Example
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient1" cx="0.5" cy="0.5" r="0.5"
fx="0.35" fy="0.35" fr="5%">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="darkseagreen"/>
</radialGradient>
<radialGradient id="gradient2" cx="0.5" cy="0.5" r="0.5"
fx="0.35" fy="0.75" fr="5%">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="darkseagreen"/>
</radialGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#gradient1)" />
<circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translateX(240px);" />
</svg>
Usage notes
Value | <length> |
---|---|
Default value |
Coincides with the presentational value of cy for
the element whether the value for cy was inherited or not.
|
Animatable | None |
Example
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
fx="0.35" fy="0.35" fr="5%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient)" stroke="black" stroke-width="2"/>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'fy' in that specification. |
Candidate Recommendation | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'fy' in that specification. |
Recommendation | Initial definition |
Browser compatibility
BCD tables only load in the browser