为什么我的圈子不在左上角开始? 我在这里想念什么?

我不确定为什么X轴的0位于图形的中心。

我要疯了吗? :)

 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="20" viewBox="0 0 100 20"> <svg x="0" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="20" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="40" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="60" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="80" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> </svg> 

#1楼 票数:2 已采纳

您正在使用viewBox="0 0 100 20"这意味着以用户单位为单位的宽度为100,高度为20。同时,您正在使用width="150" height="20"您可以删除height属性。 在这种情况下,将计算高度,以使w / h的融洽度保持不变。 如果您需要width="150" height="20" ,则可以尝试使用其他viewBox="0 0 150 20"

阅读有关viewBox属性的更多信息

 svg{background:#d9d9d9} 
 <svg xmlns="http://www.w3.org/2000/svg" width="150" viewBox="0 0 100 20"> <svg x="0" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="20" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="40" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="60" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="80" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> </svg> 

  ask by Frank Sandqvist translate from so

未解决问题?本站智能推荐:

1回复

ShapeShifter旋转使用坐标0、0,而不是中心

我正在尝试使用变形器来创建动画https://shapeshifter.design/但无论我在尝试向矢量添加旋转动画时做什么(尝试了许多矢量,有些是我创建的,有些是我已经在线下载)它在 0,0 坐标上旋转,而不是我的图像的中心。 重现步骤 打开变形器 选择导入svg 选择 svg 添加组图层并
2回复

SVG坐标到VML坐标

我有svg文件 我正在尝试将其手动转换为vml,我得到的是 问题:我得到的图像比例错误 问题:如何将svg尺寸/坐标正确转换为vml尺寸/坐标
2回复

中心对齐嵌套SVG

我需要在引脚/标记SVG的顶部放置随机形状的图标SVG(即不一定是方形的)。 我可以轻松地堆叠它们,但是我不确定如何对齐它们,因此无论形状如何,图标都在垂直和水平方向对齐。 标记SVG : <svg xmlns="http://www.w3.org/2000/svg"
4回复

SVG从VectorArt坐标

目前这可能是不可能的,但我想知道是否有可能采取一些矢量艺术并通过某种程序将其转换为SVG坐标来运行它? 例如,假设您有一个徽标作为jpg可以将程序精确映射到SVG以显示在网站上吗? 谢谢你的任何提示!
1回复

Python从.svg文件获取矢量路径的坐标

因此,对于我应该编写一个所谓的“ V-绘图仪”的学校项目,我的团队进行了构建,并且我设法对所有计算进行了编程,依此类推,基本上,我可以使其移至某个x / y坐标并进行升/升笔。 我将带有potrace的图像转换为.svg文件,据我了解,该文件应包含绘图仪将遵循的特定路径。 我的想法是读取向
1回复

使用raphaeljs移除rect的中心?

我想知道是否可以说从.rect对象的中心删除一个圆吗? 我似乎找不到关于该主题或任何细节的任何问题或答案,所以我假设没有,但是是否有另一种方法可以在可缩放的中心圆周围应用暗淡的背景?
2回复

使用JavaScript创建SVG矢量

我试图找到一种方法来创建 SVG 折线,其中每个点的“x”和“y”值被定义为 JavaScript 文件生成的值。 这些数字基于一系列具有 if/else 条件的随机变量。 我已经准备好用于绘制这些点的 JavaScript 文件,但我不知道将变量 id 链接到 SVG 脚本的正确方法。 这甚至可能
1回复

使用Css旋转SVG(动画)

我想要一个css编码的动画旋转svg图像。 我不知道该怎么做。 最后,它必须看起来像这样: http : //baveltje.com/logo/logo.html 。 我对css完全不熟悉。 旋转的svg是gear1.svg和gear2.svg。 我想让它们旋转360度无限时间,我想