cx
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Атрибут cx определяет координату центральной точки по оси x.
Этот атрибут можно использовать для следующих SVG-элементов:
Пример
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<radialGradient cx="25%" id="myGradient">
<stop offset="0" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<circle cx="50" cy="50" r="45" />
<ellipse cx="150" cy="50" rx="45" ry="25" />
<rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
circle
Для элемента <circle> атрибут cx определяет координату центра фигуры по оси x.
| Значение | <length-percentage> |
|---|---|
| Значение по умолчанию | 0 |
| Анимируемый | Да |
Примечание:
Начиная с SVG2, cx является Геометрическим свойством, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для окружностей.
ellipse
Для элемента <ellipse> атрибут cx определяет координату центра фигуры по оси x.
| Значение | <length-percentage> |
|---|---|
| Значение по умолчанию | 0 |
| Анимируемый | Да |
Примечание:
Начиная с SVG2, cx является Геометрическим свойством, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для для эллипсов.
radialGradient
Для элемента <radialGradient> атрибут cx определяет координату конечной окружности радиального градиента по оси x.
| Значение | <length-percentage> |
|---|---|
| Значение по умолчанию | 50% |
| Анимируемый | Да |
Пример
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="0" id="myGradient000">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="50%" id="myGradient050">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="100%" id="myGradient100">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
</defs>
<rect
x="1"
y="1"
width="8"
height="8"
fill="url(#myGradient000)"
stroke="black" />
<rect
x="13"
y="1"
width="8"
height="8"
fill="url(#myGradient050)"
stroke="black" />
<rect
x="25"
y="1"
width="8"
height="8"
fill="url(#myGradient100)"
stroke="black" />
</svg>
Спецификации
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |