Блог

Я разрабатываю SVG-изображение снеговика и пытаюсь использовать переменные для определения конкретных вещей. Цвет ремешка на шляпе и цвет шарфа успешно задаются var(--maincolor) . С чем у меня возникли проблемы, так это с тем var(--armangle) .

 lt;path d="..." stroke="#442200" stroke-width="2" fill="none" transform="rotate(var(--armangle))" transform-origin="32.5% 60%"/gt;  

Почему это не принимается?

Я пытался:

 svg{  --armangle: 20deg; }  

и

 svg{  --armangle: 20; }  

но ни то, ни другое не работает вообще.

Есть ли способ использовать переменную в функции в CSS? Нормальное значение (без deg ) работает ( deg просто игнорируется) очень хорошо.

Вы должны использовать либо атрибуты, либо CSS для оформления.

Как вы можете видеть из двух примеров, стиль может быть определен либо как часть SVG, либо в отдельной таблице стилей.

При использовании переменных/значений CSS необходимо указать, что это количество степеней (например 20deg ).

 :root {  --armangle: 20deg; } 

 lt;svg viewBox="0 0 3 3" width="200" height="200"gt;  lt;stylegt;  path {  transform: rotate(var(--armangle));  }  lt;/stylegt;  lt;path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"  stroke-width=".1" fill="none" transform-origin="32.5% 60%"/gt; lt;/svggt; 

 :root {  --armangle: 20deg; }  svg gt; path {  transform: rotate(var(--armangle)); } 

 lt;svg viewBox="0 0 3 3" width="200" height="200"gt;  lt;path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"  stroke-width=".1" fill="none" transform-origin="32.5% 60%"/gt; lt;/svggt;