Возможно ли для тегов svg использовать координаты из таблицы стилей css?

Question

Чтобы избежать повторяющихся координат, я хотел бы иметь возможность получить координаты из общего стиля.Однако, когда я попробовал это, это не сработало.Это просто синтаксическая ошибка?Есть ли способ добиться этого?

работает:

<rect x="0" y="0" width="30" height="30">

не работает:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="288mm" height="170mm" viewBox="0 0 288 170" version="1.1">
<style type="text/css">
<![CDATA[
rect {x:0;y:0;height:15;width:15; }
.a {fill:#ff0000;}
.b {fill:#00ff00;}
]]>
</style>
<g transform="translate(50,35)">
<rect/>
</g>
<g transform="translate(50,70)">
<rect/>
</g>
</svg>

Answer 1

Вы можете использовать элемент use вместе с символом, чтобы обеспечить общий компонент многократного использования.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="288mm" height="170mm" viewBox="0 0 288 170" version="1.1">
<symbol id="r">
   <rect width="15" height="15"/>
</symbol>
<g transform="translate(50,35)">
<use href="#r" fill="blue"/>
</g>
<g transform="translate(50,70)">
<use href="#r" fill="red"/>
</g>
</svg>