This page was translated from English by the community. Learn more and join the MDN Web Docs community.
cx
Атрибут cx определяет координату центральной точки по оси x.
Этот атрибут можно использовать для следующих SVG-элементов:
Пример
html,
body,
svg {
height: 100%;
}
<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% |
| Анимируемый | Да |
Пример
html,
body,
svg {
height: 100%;
}
<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 |