SVG 在 Safari 中完全没有响应答案

【问题标题】：SVG completely unresponsive in SafariSVG 在 Safari 中完全没有响应
【发布时间】：2012-05-25 10:12:32
【问题描述】：

（这个问题是 Safari Scrollbars & SVG 的后续问题 - 建议的解决方法是使用 javascript，但 Safari 甚至没有响应 javascript。甚至是直接的 css。）

我无法从 Safari 获取全尺寸的 svg。它根本拒绝放大。我希望 min-width 遵循 jquery 窗口宽度，但它忽略了 javascript（其他浏览器似乎很好），然后即使我直接更改 css 它甚至忽略“宽度：700px;”

SVG 文件

  viewBox="0 0 800 800"

（未指定高度或宽度）

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style type="text/css">
   .objectwrapper{
    max-width: 80%;
    margin-right:auto;
    margin-left:auto;
  }
 .objectdiv{
    max-width: 100%;
    margin-right:auto;
    margin-left:auto;
    display:block;
  }
 .svg{
    width:100%;
    display:block;
  }
 </style>
 <script type="text/javascript"      
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script  type="text/javascript">

  var sixtypercentInnerWidth = .6*$(window).width();


  $("document").ready(function(){
      $(".objectwrapper").css("max-width",sixtypercentInnerWidth);
  });
  </script>
</head>
<body>
 <div class="objectwrapper">
 <div class="objectdiv">
         Object4
        <object class="svg" type="image/svg+xml"       data="question0optimize1.svg" >      
         </object>   

 </div>
 </div>

 </body>
 </html>

编辑

我刚刚发现编辑 .svg 得到了一些响应......

   $("document").ready(function(){
        $(".svg").css("width",sixtypercentInnerWidth);
        $(".svg").css("height",sixtypercentInnerWidth);
    });

我需要添加 HEIGHT 和 WIDTH.. 所以看起来 SAFARI 不能做 svg %'s???????

【问题讨论】：

为什么这被否决了？ Safari 不允许 css 控制 svg 图像大小，除非指定高度和宽度，否则不会渲染

标签： safari svg

【解决方案1】：

Safari 绝对能够使用 CSS 调整 SVG 元素的大小。我每天都这样做:)

你的原因

.svg{
width:100%;
display:block;

}

不应用是因为您的 objectwrapper 和 objectdiv 元素在 CSS 中没有明确的宽度。最大宽度是不够的。给这些父元素一个明确的 100% 宽度，这应该可以解决问题。这个不用JS绕弯子了。

几个相关点：

a) Jquery 选择器和函数通常不能很好地与 SVG 一起使用。我在路径属性上使用了 jquery animate 方法，仅此而已。其他一切都失败了。你需要编写 vanilla js 来使用 SVG 做很多事情。

b) 在 Chrome 中解决 SVG 问题要容易得多。开发工具仍然有一些奇怪的 SVG 错误正在解决中，但通常如果它在 Chrome 中工作，它在 Safari 中也能工作。

【讨论】：

干杯！是的，这款 Safari 确实是“响应式”的，而且比以前好多了……但它仍然需要高度。尝试更改窗口并观察其他浏览器的平滑度，但您可以看到 safari 在 svg 周围创建了一个框（如果您的比例与默认的 WxH 不同，它也会最小化加载宽度）。但是，是的，这就是您获得响应速度更快的 Safari 的方式。 +1 接受并升级问题，或者告诉我为什么它被降级！
很难说没有链接的例子，但同样，您需要在所有包含元素上声明明确的百分比高度，以便高度正确级联。另外，请了解根据您指定 preserveAspectRatio 属性的方式，将 svg VIEWBOX 绘制在其包含元素内：您当前看到的是默认的“满足”值
很难说没有链接的例子，但同样，您需要在所有包含元素上声明明确的百分比高度，以便高度正确级联。此外，请了解根据您指定 preserveAspectRatio 属性的方式，在 SVG 元素内绘制 svg VIEWBOX。您当前看到的行为是默认的“meet”值，它在 svg 元素内尽可能大地缩放视图框，而不会变形和裁剪。如果需要裁剪，请使用“slice”而不是“meet”。谷歌这方面的 W3 规范以获取详细信息。

【解决方案2】：

在我看来，safari 完全有能力在 os x、windows 或 ios 上制作 svg。我不使用，但我发现 JQuery 有时对 svg 不直观。在animation 上，我什至会制作一些支持 javascript 的动画，可以在除 MS IE 之外的所有浏览器中使用。

【讨论】：