SVG 완전히 응답하지 않는

이

(해결 방법은 자바 스크립트를 사용하도록 제안했다,하지만 사파리도 자바 스크립트 심지어 바로 CSS에 응답하지 않습니다이 질문은 인 Safari Scrollbars & SVG에서 후속..) Safari의 전체 크기의 SVG 그것은 전혀 확대를 거부합니다. 최소 너비가 jquery 창 너비를 따르길 원하지만 javascript (다른 브라우저는 괜찮아 보입니다)를 무시한 다음 CSS를 직접 변경하더라도 "width : 700px;"도 무시합니다.SVG 완전히 응답하지 않는

난 그냥 그 편집 t을 발견했습니다

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뿐만 아니라 높이를 추가 할 필요가 그래서 사파리는 SVG %의 할 수 없어 보인다 ???????

출처

2012-04-12 Gamemorize

왜 이것을 다운 그레이드 했습니까? Safari는 CSS에서 svg 이미지 크기를 제어 할 수 없으며 높이와 너비가 지정되어 있지 않으면 렌더링하지 않습니다. – Gamemorize

Safari는 CSS를 사용하여 SVG 요소의 크기를 조정할 수 있습니다. 나는 매일 :

당신의 objectwrapper 및 objectdiv 요소는 CSS의 명시적인 폭이 없기 때문에 당신의

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

}

이 적용되지는 이유 않습니다. 최대 너비로는 충분하지 않습니다. 부모 요소에 명시적인 100 % 너비를 지정하면 해결됩니다. JS와 함께 굴곡을 돌릴 필요가 없습니다.

몇 가지 관련 사항 :

가) JQuery와 선택기와 기능은 일반적으로 SVG와 함께 잘 재생되지 않습니다. jquery animate 메서드를 경로 특성에 사용했지만 그게 전부입니다. 다른 모든 것은 실패합니다. SVG를 사용하여 바닐라 js를 작성해야합니다.

b) Chrome에서 SVG 문제를 쉽게 해결할 수 있습니다. Dev Tools에는 아직 SVG에 대한 이상한 버그가 있습니다 만, 일반적으로 Chrome에서 작동하는 경우 Safari에서 작동합니다.

출처

2012-05-25 02:12:32 Ben

건배! 네,이 사파리는 실제로 '반응하는'것이고 이전보다 훨씬 좋았지 만 여전히 높이를 필요로하고 있습니다. 창을 변경하고 다른 브라우저의 부드러움을 볼 수 있지만 사파리가 svg 주위에 상자를 만들었습니다 (너비가 기본 WxH와 다른 경우 너비가 최소화됩니다). 하지만 네, 그러면 사파리가 더 빨리 반응합니다. +1을 허용하고 질문을 업그레이드하십시오. 또는 왜 그것이 다운 그레이드되었는지 말해주십시오! – Gamemorize

링크 된 예제를 보지 않고 말하기는 어렵지만, 다시 캐스케이드하려면 높이를 포함하는 모든 포함 요소에 명시적인 백분율 높이를 선언해야합니다. 또한 svg VIEWBOX는 preserveAspectRatio 속성을 어떻게 지정했는지에 따라 포함하는 요소 내부에 그려집니다. 현재보고있는 것은 기본 "충족"값입니다 – Ben

링크 된 예제를 보지 않고 말하기는 어렵지만 계단식 높이에 대한 모든 포함 요소에 대한 명시적인 백분율 높이를 올바르게 선언해야합니다. 또한 preserveAspectRatio 특성을 어떻게 지정했는지에 따라 svg VIEWBOX가 SVG 요소 내부에 그려지는 것을 이해하십시오. 현재보고있는 비헤이비어는 기본값 인 "충족"값입니다.이 값은 svg 요소 내에서 가능한 큰 뷰 박스의 크기를 비틀림없이 또는 자르지 않고 조정합니다. 자르기가 바람직하다면 "meet"대신 "slice"를 사용하십시오. 자세한 내용은 Google W3 사양을 참조하십시오. – Ben

제 생각에는 사파리가 완벽하게 svg를 할 수 있습니다. os x, windows 또는 ios 중 하나입니다. 나는 사용하지 않지만 때때로 JQuery가 svg에서 직관적으로 행동하지 않는 것을 발견한다. 에 animation 나는 모든 브라우저에서 작동하는 일부 자바 스크립트 백업 애니메이션을 수행합니다.

출처

2012-04-13 15:07:44

SVG 완전히 응답하지 않는

답변

관련 문제