以设计尺寸显示缩放的 SVG
我有一个适合其父
示例代码：
<object width="500" height="300" data="pic.svg">
<!-- The image will scale to be 300px heigh,
I need it to be shown at 32x32 and centered in the viewport,
but could be zoomed to any size.
Setting width and height attributes will crop the viewable area to 32x32,
so we can't use this solution.
-->
<svg viewBox="0 0 32 32" ... >
</object>
I have an SVG image which fits its parent <object> dimensions. The image is zoomed by changing its currentScale and currentTranslate properties. How can I scale the image to be shown at its intended size and center it in the viewport?
Example code:
<object width="500" height="300" data="pic.svg">
<!-- The image will scale to be 300px heigh,
I need it to be shown at 32x32 and centered in the viewport,
but could be zoomed to any size.
Setting width and height attributes will crop the viewable area to 32x32,
so we can't use this solution.
-->
<svg viewBox="0 0 32 32" ... >
</object>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好的，我找到了解决方案。为此，我从宽度/高度/视图框（取决于可用的）中获取了预期的大小，使视图框等于可用视口的大小（即包含
我在我的Opera SVG Viewer widget中使用它，你可以看到我的SVG缩放库此处。
Ok, I found the solution. To do this I got the intended size from width/height/viewbox (depending on which is available), made the viewBox equal the size of the available viewport (i.e. the containing
<object>tag) and changed the x/y values of the viewBox attribute so that the image appears to be in the center of the viewport, and removed width and height attributes if they were present.I use this in my Opera SVG Viewer widget, you can see my SVG zooming library here.
设置
viewBox属性以包含要显示的内容区域（以本地 SVG 坐标表示），但设置height和width属性将 SVG 的像素数设置为您希望其在网页上显示的像素数。Set the
viewBoxattribute to encompass the area of the content (in local SVG coordinates) you want to display, but set theheightandwidthattributes of the SVG to the number of pixels you want it to be displayed as on the web page.