1

(この質問はSafari Scrollbars & SVGからのフォローアップです- 提案された回避策は javascript を使用することでしたが、Safari は javascript にも応答しません。またはストレート css でさえも。)

Safari から完全なサイズの svg を取得できません。拡大することをまったく拒否します。最小幅を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);
    });

WIDTH だけでなく HEIGHT も追加する必要があったので、SAFARI は svg % を実行できないようです???????

4

2 に答える 2

1

Safari は、CSS を使用して SVG 要素のサイズを完全に調整できます。私は毎日それをします:)

あなたの理由は

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

}

適用されていないのは、objectwrapper 要素と objectdiv 要素に CSS で明示的な幅がないためです。max-width では十分ではありません。これらの親要素に明示的な 100% 幅を指定すると、問題が解決するはずです。これで JS を使用して曲がり角を曲がる必要はありません。

関連するいくつかのポイント:

a) 一般に、Jquery セレクターと関数は SVG とうまく連携しません。path 属性で jquery animate メソッドを使用しましたが、それだけです。他のすべてが失敗します。SVG で多くのことを行うには、vanilla js を作成する必要があります。

b) SVG のトラブルシューティングは、Chrome の方がはるかに簡単です。Dev Tools にはまだ解決中の SVG に関する奇妙なバグがいくつかありますが、通常、Chrome で動作する場合は Safari でも動作します。

于 2012-05-25T02:12:32.947 に答える
0

私の意見では、safari は os x、windows、または ios のいずれかで svg を完全に実行できます。私は使用しませんが、JQuery が svg で直感的に動作しないことがあります。アニメーションでは、MS IE 以外のすべてのブラウザーで動作する JavaScript を使用したアニメーションもいくつか行います。

于 2012-04-13T15:07:44.960 に答える