2013-04-12 2 views
12

이브 온라인 용 게임 내 브라우저 RoR 앱을 구축 중입니다. 내 응용 프로그램의 요구 사항 중 하나는 graphviz에 의해 생성 된 SVG 그래프를 표시하는 것입니다. 이 환경에서 요구 사항을 충족시키는 데 몇 가지 문제가 있습니다.인라인 SVG 대 <object> 임베디드

공식적인 문서는 이브의 IGB 사용할 수 없지만, 위키 나타냅니다

새로운 이브 온라인은 게임 내 브라우저 (코드 명 Moondoggie)는 기술 스택이 두 요소를 결합 기반으로

:

Awesomium : 렌더링 된 웹 페이지를 3D 엔진에서 파싱 할 수있는 데이터로 전달하는 미들웨어 계층입니다. Awesomium은 Khrona Software에 의해 개발되었습니다.

Chromium : 프로세스 간 통신, 웹 페이지 렌더링, HTTP 통신 및 웹 브라우저 작성에 필요한 기타 모든 기본 사항을 제공하는 미들웨어 계층입니다. 자체적으로 Apple의 Webkit 프레임 워크를 기반으로합니다. Chromium은 주로 Google이 주도하는 오픈 소스 프로젝트입니다.

이 때문에 Moondoggie는 Acid3 테스트를 통과 할 수 있으며 전체 HTML 4.01 및 CSS3 사양을 지원할 수 있습니다.

내 앱의 자바 스크립트에 액세스하려면 SVG에 포함시켜야하는 링크가 필요합니다. <embed> 또는 <object>을 포함 시키면 SVG가 내 JS 파일의 범위를 벗어납니다.

<embed> 또는 <object>을 사용하면 게임 내 브라우저에서 svg를 올바르게 렌더링합니다. 아래에있는 것처럼 인라인하면 SVG의 텍스트 요소 만 포함하는 한 줄의 텍스트가 표시됩니다.

업데이트 여기가 내가있는 곳입니다. 나는 그 자체로 내 견해 내부의 render file:을 사용함으로써 차이점을 발견하지 못했기 때문에 대부분이 중복 된 것이라고 확신합니다. mime 유형 등록은 respond_to와 함께 사용하는 것이 더 좋다고 생각하지만,이 시나리오에서 어떻게 사용할지 모르겠습니다. 기본보기의

조각 :

<%= render "map/map" %> 

부분보기 파일 :

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg"> 
<head> 
    <title>Embedded SVG</title> 
</head> 
    <body> 
     <%= render file: @map.output_file_path %> 
    </body> 
</html> 

설정/초기화/mime_types.rb : 그것은 렌더링 이유

Mime::Type.register "image/svg+xml", :svg 

이해가 안 <object> 태그 안에 있지만 인라인은 아닙니다. 내 기본보기에서 <object> 내부의 환경을 어떻게 에뮬레이션합니까? 또는 <object> 태그에 내 자바 스크립트 기능에 대한 액세스 권한을 부여하려면 어떻게해야합니까?

+0

이 Webkit 기반 브라우저가 HTML5를 지원하지 않는다는 의미입니까? XHTML 4를 사용하고 있습니까? HTML5 이전 버전의 경우 XHTML은 제 경험으로는 가장 유망한 방법입니다. –

+0

'HTML5에 대한 프로토 타입 지원'이 있지만 충돌하거나 잘못 될 것 같습니다. 나는 정말로 모른다. 말 그대로이 브라우저가 지원하고 지원하지 않는 모든 문서가 있습니다. XHTML에 익숙하지 않고 doctype에 대한 좋은 핸들을 가지고 있지 않지만 다음을보고 있습니다. http://www.w3.org/QA/2002/04/valid-dtd-list.html . 나는 XHTML을 사용하기 위해''대신에 이것들 중 하나를 사용해야 할 것이라고 가정한다. – sicks

+0

그냥 생각. Google Charts가하는 일을 살펴볼 가치가 있습니다. 그들은 SVG와 Javascript를 상당히 많이 사용하므로 거기에 아이디어를 얻을 수 있습니다. 어쩌면 인터랙티브 갤러리 https://developers.google.com/chart/interactive/docs/gallery의 원형 차트를 통해 아이디어를 얻을 수 있습니다. 나는 그들이 태그를 직접 사용한다고 생각하는데, 이는 모든 것을 범위 내에 유지합니다. – Phil

답변

4

부모 문서에서 < 개체> 또는 < embed> 내의 문서에 액세스 할 수 있습니다. 이것은 ACID3가 여전히 테스트하는 (너무 적은) 방법 중 하나입니다.

Here's an example 부모 html 문서의 스크립트에서 svg 문서를 수정하는 방법.

+0

개체/embed에 부모로부터의 이벤트 리스너가 필요합니다. 그래서 제가 처음에 인라인을 사용했습니다. 상위 페이지의 함수를 호출하는' '태그 안에 이벤트 리스너를 추가 할 수 있습니까? – sicks

+0

예. 'elm.addEventListener' 이벤트 리스너를 추가 한 다음,이 예제와 약간 비슷한'window.parent.yourFunctionInMainDocument (...)'와 같이 호출 할 수있는 이벤트를 처리하는 함수에 추가하십시오. http : //dahlström.net /svg/html/from-svg-to-parent-html-script.html. –