4

Illustrator で単純なポリゴンを作成し、画像の前にクリッピング パス (マスク) を作成しました。SVG ファイルとしてエクスポートしたところ、Chrome と Safari で完全にレンダリングされました。

ただし、SVG データを使用して HTML ファイルを作成すると、Chrome では完全にレンダリングされますが、Safari 6.0.2ではレンダリングされません。

何が間違っているのかよくわかりません。SVG の例 (個人サイト) と HTML ( jsfiddle の例) の例を作成しました。

4

5 に答える 5

7

useマスクを適用するために使用するのではなく、実際のpolygon要素を使用するだけで、Safari のバグに遭遇しているに違いありません。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="700px" height="700px" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
  <g>  

    <clipPath id="SVGID_2_">
      <polygon id="SVGID_1_" points="576.35,444.245 670.595,350 576.349,255.754 576.349,123.651 444.246,123.651 350,29.405 255.755,123.651 122.96,123.651 122.96,256.446 29.405,350.001 122.96,443.555 122.96,577.041 256.446,577.041 350,670.595 443.554,577.041 576.35,577.041"/>
    </clipPath>

    <g id="LwhyVN.tif" style="clip-path:url(#SVGID_2_);">
      <image style="overflow:visible;" width="1024" height="768" id="Layer_0_1_" xlink:href="http://fc05.deviantart.net/fs13/f/2007/071/9/e/Japanese_shiba_inu__shiba_dog__by_MogamiJ.jpg"  transform="matrix(0.8418 0 0 0.8418 27.5078 37.498)"></image>
    </g>

  </g>
</svg>

これはSafari 6で機能します。

于 2013-01-17T17:38:58.493 に答える
1

SafariはSVGのclipPathsの大ファンではありません。代わりに、古い学校の<Object>要素に埋め込まれている場合は完全に機能します。それを行うには、PHPヘッダーを使用して正しいContent-typeものを定義する必要がありapplication/xhtml+xmlました。それがないと、提供されるのはtext/html、Safari（および最新バージョンのブラウザの古いバージョン）がSVGを表示しない場合だけです。

PHPをSVGで使用するには、Webサーバーの構成ファイルに2つの追加を追加する必要がありました。Apacheでは、タイプpsvgをmime-typeファイルに追加して、関連する行が次のようになるようにしました。 image/svg+xml svg svgz psvg

次に、Apache構成ファイルにSVGハンドラーを追加して、関連する行が次のようになるようにする必要がありました。AddType application/x-httpd-php .php .php4 .phtml .psvgこれにより、すべての.psvgファイルがPHPとしてレンダリングされます。

そこで、faces.psvgという名前の新しいファイルを作成しました。これは次のようになります。

<?php
    header("Content-type: image/svg+xml");
    print('<?xml version="1.0" encoding="iso-8859-1"?>');
?>
<svg version="1.1"> //your svg file data </svg>

次に、index.phpという新しい.phpファイルを作成しました。これは次のようになります。

<html>
<head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
     <object type="image/svg+xml" data="faces.psvg" width="1120" height="800"></object>
</body>
</html>

そしてvoilá、モバイルSafariでさえ、どこでも動作するsvgクリッピングマスク。

于 2013-01-17T17:40:38.730 に答える
0

clipPath要素を要素内にラップする必要がありdefsます。

<defs><clipPath></clipPath></defs>
于 2013-01-17T23:04:46.600 に答える