동적 SVG 이미지 생성 문제

StackOverflow https://stackoverflow.com/questions/1623242

  •  06-07-2019
  •  | 
  •  

문제

사용자 입력을 기반으로 SVG 이미지를 생성하기 위해 서버 측 스크립트 (PHP)를 작성하려고합니다. 다음 코드를 사용하고 있습니다.

<?php

echo '<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<head><meta http-equiv="Content-Type" content="svg+xml" /></head>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>';

?>

MIME 유형이 SVG+XML이어야한다는 것을 읽었으므로 위에서 볼 수 있듯이 컨텐츠 유형으로 설정하려고했습니다. Firefox가 올바른 코드를 수신하지만 이미지는 렌더링되지 않습니다. 누군가가 여기서 무엇을 바꿀지 알고 있습니까?

도움이 되었습니까?

해결책

에 따르면 Wikipedia의 SVG 페이지, SVG는 다음과 같이 제공되어야합니다 image/svg+xml.
또한보십시오 : 1.2 SVG MIME 유형, 파일 이름 확장 및 Macintosh 파일 유형

다음 메타 :

<meta http-equiv="Content-Type" content="svg/xml" />

서버에서 컨텐츠가 제공되는 방식을 정의하지 않습니다. HTML 페이지의 경우 해당 정보를 제공하는 방법을 정의 할 수없는 방법입니다.
그리고 메타 요소가 SVG 사양 -- ^^


여기에서해야 할 일이 있습니다 HTTP 헤더를 보내십시오 서버에서 데이터의 컨텐츠 유형을 나타냅니다.

이것은 PHP를 사용하여 수행됩니다 header 기능 ; 귀하의 경우 :

header('Content-type: image/svg+xml');

echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>';

메모 :

  • 나는 그것을 제거했다 <meta> 그리고 <head> 태그; 확실하지 않습니다 <head> 제거해야하지만 비어 있으면 ....
  • 전화를 추가했습니다 header 기능
  • SVG Red Circle은 Firefox에 의해 제대로 표시됩니다. 따라서 작동하는 것 같습니다 ;-)

도움이 되었기를 바랍니다 !

다른 팁

이렇게 말합니다.

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <head><title>test</title></head>
    <body>
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500">
        <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg:svg>
    </body>
</html>

다음과 동일하게 작동합니다.

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>test</title></head>
    <body>
    <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg>
    </body>
</html>

더 읽기 쉬운/깨끗한 스스로 판단 할 수 있습니다. 많은 SVG 단편을 사용하는 경우 첫 번째 예제에서와 같이 HTML 루트 요소에 XMLNS 탈선을 배치하는 경우에 따라 의미가 있습니다.

최근 XHTML 문서에서 SVG를 사용하는 데 성공했습니다.

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <head><title>test</title></head>
    <body>
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500">
        <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg:svg>
    </body>
</html>

트릭은 모든 항목에 대한 SVG : 접두사를 사용하는 것이 었습니다. 브라우저가 올바르게 구문 분석하는 네임 스페이스를 알아야합니다.

그런 다음 Raphael JavaScript 라이브러리를 정리했습니다 http://raphaeljs.com/ SVG 객체를 처리하는 것이 매우 쉽습니다.

도움이되기를 바랍니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top