fx

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:

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.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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
fx
?
?
?
?
?
?
?
?
?
?
?
?

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fx