Css 减小SVG标记的大小

我在这里创建了一个SVG动画勾号：

如何减小刻度的大小？例如，到所示尺寸的一半

#检查{
填充：无；
笔画：绿色；
笔画宽度：20；
行程：180；
行程偏移：180；
-webkit动画：绘制1.2s无限轻松；
动画：画1.2秒无限轻松；
动画填充模式：正向；
动画迭代次数：1；
}
-webkit-@关键帧绘制{
到{
笔划偏移：0；
}
}
@关键帧绘制{
到{
笔划偏移：0；
}
}

---

您可以使用css

变换：比例（0.5）

至

#检查如下所示：

CSS transform属性允许您修改对象的坐标空间
CSS可视化格式化模型。使用它，可以翻译元素，
旋转、缩放和倾斜。-借


#检查{
变换：比例（0.5）；
填充：无；
笔画：绿色；
笔画宽度：20；
行程：180；
行程偏移：180；
-webkit动画：绘制1.2s无限轻松；
动画：画1.2秒无限轻松；
动画填充模式：正向；
动画迭代次数：1；
}
@-webkit关键帧绘制{
到{
笔划偏移：0；
}
}
@关键帧绘制{
到{
笔划偏移：0；
}
}
您可以使用css
变换：比例（0.5）
至
#检查如下所示：

CSS transform属性允许您修改对象的坐标空间
CSS可视化格式化模型。使用它，可以翻译元素，
旋转、缩放和倾斜。-借


#检查{
变换：比例（0.5）；
填充：无；
笔画：绿色；
笔画宽度：20；
行程：180；
行程偏移：180；
-webkit动画：绘制1.2s无限轻松；
动画：画1.2秒无限轻松；
动画填充模式：正向；
动画迭代次数：1；
}
@-webkit关键帧绘制{
到{
笔划偏移：0；
}
}
@关键帧绘制{
到{
笔划偏移：0；
}
}
我建议在svg元素中添加
viewbox
属性，这样您就可以通过简单地更改元素的宽度和/或高度来正确控制元素的大小，同时保持元素的外观和内部坐标系

您的元素大约有一个
140 x 95
viewbox，因此您可以编写

<svg width="50" viewbox="0 0 140 95">
    <path id="check" d="M10,30 l30,50 l95,-70" /> 
</svg>



示例：
我建议为svg元素添加
viewbox
属性，这样您就可以通过简单地更改元素的宽度和/或高度来正确控制元素的大小，同时保持其纵横比和内部坐标系

您的元素大约有一个
140 x 95
viewbox，因此您可以编写

<svg width="50" viewbox="0 0 140 95">
    <path id="check" d="M10,30 l30,50 l95,-70" /> 
</svg>



示例：
如果不添加
xmlns
和
viewBox
属性，在浏览器上显示该属性将非常不稳定。我看不到svg（无论是在这里还是在PLNKR上）。通过设置SVG的
宽度
和
高度
可以轻松更改SVG的大小，您可以尝试
变换：缩放（.5.5）
，将其大小减小一半。另外：要使动画在Safari上工作，请使用
@-webkit关键帧
，不是
-webkit-@keyframes
。如果不添加
xmlns
和
viewBox
属性，在浏览器上显示该属性将非常不稳定。我看不到svg（无论是在这里还是在PLNKR上）。通过设置SVG的
宽度
和
高度
可以轻松更改SVG的大小，您始终可以尝试
变换：缩放（.5.5）
将其大小减小一半。另外：要使动画在Safari上工作，请使用
@-webkit关键帧
，而不是
-webkit-@关键帧
。