SVG视口等效转换计算错误排查及修正

我尝试按照W3C规范计算SVG视口的等效变换，并用圆形元素做验证测试。

初始测试代码 #

svg {  
    background-color: gray;  
}

<svg width="100" height="100" viewBox="0 0 50 100">  
    <circle r="50" />  
 </svg>

错误分析与修正 #

计算过程中曾犯两个错误，导致结果不符合预期：

• 误将e-width、e-height取值为circle元素的尺寸
• 错误地把transform属性应用在svg元素本身

修正后的关键要点：

1. e-width、e-height必须取svg元素的实际显示尺寸（100,100）
2. transform变换需要应用在子元素circle上

等效效果实现代码 #

修正后计算得出translate-x值为25，以下是实现与初始代码等效效果的代码：

svg {  
    background-color: gray;  
}

<svg width="100" height="100">  
    <circle r="50" transform="translate(25 0) scale(1 1)" />  
</svg>

<h1>等效效果对比</h1>
<svg width="100" height="100" viewBox="0 0 50 100">  
    <circle r="50" />  
 </svg>

内容的提问来源于stack exchange，提问作者oceanGermanique