This article is in need of a technical review.

    Our volunteers haven't translated this article into 正體中文 (繁體) yet. Join us and help get the job done!

    « SVG Attribute reference home

    For the <radialGradient> element, this attribute define the x-axis coordinate of the focal point for radial gradient. If the attribute is not specified, it's assumed to be at the same place as the center point.

    Usage context

    Categories None
    Value <coordinate>
    Animatable None
    Normative document SVG 1.1 (2nd Edition): The radialGradient element


    A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

    Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.


    <?xml version="1.0" standalone="no"?>
    <svg width="120" height="120" version="1.1"
          <radialGradient id="Gradient"
                cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="blue"/>
      <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>


    The following elements can use the fx attribute:

    Document Tags and Contributors

    Contributors to this page: kscarfone, Nagababu, Naveen_Tamanam
    最近更新: kscarfone,