html – 如何按视窗的百分比翻译SVG组
发布时间:2020-12-14 21:32:47 所属栏目:资源 来源:网络整理
导读:我有一个svg rect也就是 g (组),我想缩放它,然后翻译一个百分比的视口。 svg中的大部分内容都允许通过一个可笑的选项来指定单位;例如px,em,%,ex,pt,pc,…但是,似乎在翻译中指定的数字只是像素。 事情是,如果我必须返回并重新计算翻译的像素值,那
我有一个svg< rect>也就是< g> (组),我想缩放它,然后翻译一个百分比的视口。 svg中的大部分内容都允许通过一个可笑的选项来指定单位;例如px,em,%,ex,pt,pc,…但是,似乎在翻译中指定的数字只是像素。
事情是,如果我必须返回并重新计算翻译的像素值,那么我的svg变得依赖于分辨率。然后我,你和每个人都会被吸入一个悖论。你可以看到为什么我有点担心。 <svg> <g transform="scale(1,1) translate(0,0)"> <rect x="45%" y="25%" height="50%" width="10%"/> </g> </svg> http://jsbin.com/ubeqot/1/edit 解决方法
坚持< g>内部< svg>中的元素元素,并将具有百分比值的x和y属性添加到内部< svg>元素来翻译它。
<svg> <svg x="10%" y="20%"> <g transform="scale(1,1)"> <rect x="45%" y="25%" height="50%" width="10%"/> </g> </svg> </svg> 如果您希望首先应用比例,则可以将< svg> < g>内的元素代替。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读