Question

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

我无法从Safari获得全尺寸的svg。它完全拒绝扩大。我希望min-width遵循jquery窗口宽度，但它忽略了javascript（其他浏览器似乎很好），然后即使我直接更改css，它甚至忽略“width：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％的????????

Answer 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故障排除方式更容易。 Dev Tools仍然有一些奇怪的错误，正在制定SVG，但一般来说，如果它在Chrome中有效，它可以在Safari中使用。

Answer 2

在我看来，safari完全有能力在os x，windows或ios上做svg。我不使用但是我发现JQuery有时候不能直观地使用svg。在animation我甚至做了一些javascript支持的动画，在MS IE的所有浏览器中工作。

SVG在Safari中完全没有响应

2 个答案: