Как в SVG изменить радиус круга circle на css или js?

Question

[Cheizer]

Друзья, есть SVF маска, в ней используется элемент CIRCLE

<div class="wrap">
<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask" x="0" y="0">
      <rect x=0 y=0 width="10" height="6.7" fill="white"></rect>
      <circle cx="0.1" cy="0.1" r="1" fill="black"></circle>
      <circle cx="10" cy="0.1" r="1" fill="black"></circle>
      <circle cx="0" cy="6.7" r="1" fill="black"></circle>
      <circle cx="10" cy="6.7" r="1" fill="black"></circle>
    </mask>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="10" height="6.7" mask="url(#myMask)"/>
</svg>
</div>

Его радиус равен единице в моем случае. Как изменить этот радиус на css или js, jquery?
Иначе с адаптивностью блока совсем беда :(

Вот живой пример https://codepen.io/Cheizer/pen/XWWVKjK

Answer 1

[Рома Зварич]

Как изменить этот радиус на css или js, jquery?

Например, обратившись к фигурам кругов, вложенным в элемент с id="myMask"

#myMask circle {
  r: 2;
}

Результат:
https://codepen.io/hisbvdis/pen/mddprBd?editors=1100

Comments

[Cheizer]

Благодарю! А это кроссбраузерно?

[Рома Зварич]

Роман Кузнецов, мда, точно. Этот атрибут будет доступен для изменения через CSS только в SVG 2.0.

Как вариант, можете установить размер кругов в процентах. Тогда будет адаптивность и без необходимости менять через CSS.

Пример:
https://codepen.io/hisbvdis/pen/poopNzV?editors=1100

[Cheizer]

Рома Зварич, да благодарю, у меня и есть в процентах, но вот на маленьких экранах нужно сделать меньше чем было, вот и думаю как