fx

SVG Elements
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

The fx attribute defines the x-axis coordinate of the focal point for a radial gradient.

You can use this attribute with the following SVG elements:

<radialGradient>

Example

html, body, svg {
  height: 100%;
}

<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.75" fy="0.35" 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 `cx` for the element whether the value for `cx` 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="45" cy="45" 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 'fx' in that specification.	Candidate Recommendation	No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'fx' in that specification.	Recommendation	Initial definition

Browser compatibility

BCD tables only load in the browser