SVG cx属性用法及代码示例

cx属性定义中心点的x轴坐标。

用法:

cx="x-centre"

属性值：

length:我们要设置cx-coordinate的长度。
percentage:我们要设置cx-coordinate的百分比。

我们将使用cx属性设置cx-coordinate。

范例1：

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg viewBox="0 0 350 300" 
         xmlns="http://www.w3.org/2000/<svg  
         viewBox="0 0 300 100 
         xmlns="http://www.w3.org/2000/svg"> 
  
        <circle cx="50" cy="50" r="45"/> 
        <ellipse cx="150" cy="50" rx="45" ry="25" /> 
  
    </svg> 
</body>  
  
</html>

输出：

范例2：

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg viewBox="0 0 350 300" 
         xmlns="http://www.w3.org/2000/<svg  
         viewBox="0 0 300 100  
         xmlns="http://www.w3.org/2000/svg"> 
  
        <circle cx="10%" cy="12%" r="9%"/> 
        <ellipse cx="30%" cy="12%" rx="9%" ry="5%" /> 
  
    </svg> 
</body>  
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 SVG cx Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。