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>

SVG标签是否可以使用CSS样式表中的坐标？

1 个答案: