Safari如何计算svg对象的大小? [英] How does Safari calculate size of svg objects?

问题描述

在以下情况下Safari如何确定输出svg的大小；

How does Safari determine what size to output an svg in the following scenario;

SVG代码

 viewBox 0 0 800 800
 height 100%
 width 100%

css

 svg width 100%
 containing div width 60%

Safari的svg比屏幕的60％小得多，好吧，这是一个错误.但是决定这个较小的svg大小的因素，与我能想到的任何东西都没有关系.

Safari outputs a much smaller svg than the 60% of screen, ok this is a bug. But what determines the size of this smaller svg, it has no connection to anything I can think of.

仅提供一些背景信息. Safari需要以px为单位的宽度和高度才能执行您想要的操作. ％不工作.但是它确实会输出svg，因此必须在某种程度上决定其大小.

Just to give some background info. Safari needs both width and height in px for it to do what you want. % don-t work. But it does output the svg, and so it must make a decision somewhere about its size.

推荐答案

这不是您看到的错误.这是正确的行为.浏览器默认情况下会缩放SVG viewbox (现在请注意术语，我们不是在谈论浏览器 viewport )来填充SVG元素由CSS确定的尺寸.填充行为由SVG preserveAspectRatio 属性确定.默认情况下，它设置为meet，使整个SVG可见，并保留宽高比.另一种选择是slice，它可以放大视图框以覆盖元素，即使这意味着裁剪也是如此. (slice的行为与CSS3中的background-size:cover相似.)

It's not a bug you're seeing. That's the correct behavior. The browser by default scales the SVG viewbox (careful with the terminology now, we're not talking about the browser viewport) to fill the CSS-determined dimensions of the SVG element. The fill behavior is determined by the SVG preserveAspectRatio attribute. By default it's set to meet, which keeps the whole SVG viewable, and the aspect ratio preserved. The alternative is slice which scales the viewbox up to cover the element, even when that means cropping. (slice behaves similarly to background-size:cover in CSS3.)

您需要做的是:

a)不要在SVG文件中声明明确的高度或宽度.如果您的图形编辑器正在生成它们，则只需手动删除它们即可.根据规范，如果未指定宽度和高度，则为一个值假定为100％，那么您的伪代码充其量是多余的.

a) Don't declare explicit height or width in the SVG file. If your graphics editor is generating them, just go in by hand and delete them. According to the spec, if no width and height are specified, a value of 100% is assumed, so your pseudocode is redundant at best.

b)确保为CSS中的svg元素设置了明确的高度.我建议使用Chrome的开发人员或Canary版本来对响应性svg大小进行故障排除，因为存在 bug .在Chrome中运行后，几乎肯定会在Safari中运行.

b) Make sure you're setting an explicit height for the svg element in CSS. I recommend developer or Canary builds of Chrome for troubleshooting responsive svg sizing, as there is a bug in Chrome 18 Dev Tools that has since been fixed. Once you've got it working in Chrome, it will almost certainly also work in Safari.

c)弄清楚如何设置preserveAspectRatio并手动编辑要放入声明中的svg.

c) Figure out how you want to set preserveAspectRatio and manually edit the svg to put in the declaration.

如果仍然遇到问题，请发布jsfiddle.对于其他人来说，评论要容易得多.

If you're still having trouble, please post a jsfiddle. It's much easier for other people to comment on.

这篇关于Safari如何计算svg对象的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！