cy

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

Атрибут cy определяет координату центральной точки по оси y.

Этот атрибут можно использовать для следующих SVG-элементов:

Пример

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

html

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>

circle

Для элемента <circle> атрибут cy определяет координату центра фигуры по оси y.

Значение	`<length-percentage>`
Значение по умолчанию	`0`
Анимируемый	Да

Примечание: Начиная с SVG2, cy является Геометрическим свойством, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для окружностей.

ellipse

Для элемента <ellipse> атрибут cy определяет координату центра фигуры по оси y.

Значение	`<length-percentage>`
Значение по умолчанию	`0`
Анимируемый	Да

Примечание: Начиная с SVG2, cy является Геометрическим свойством, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для для эллипсов.

radialGradient

Для элемента <radialGradient> атрибут cy определяет координату конечной окружности радиального градиента по оси y.

Значение	`<length-percentage>`
Значение по умолчанию	`50%`
Анимируемый	Да

Пример

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

html

<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="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 # RadialGradientElementCYAttribute

Смотрите также

cx
r