3

現時点では、スプライスの「マップ」を表示するために svg グラフィックスを使用しています。パターン (画像) を背景として四角形またはパスを描画しようとすると、パターンは描画された四角形/パスのローカル座標系ではなく、グローバル座標系を使用します。

これは、svg ドキュメントでパターンを定義する方法です。

<defs>
    <pattern preserveAspectRatio="true" patternUnits="userSpaceOnUse" height="24" width="50" y="0" x="0" id="black_h">
         <image height="24" width="50" y="0" x="0" xlink:href="http://newlini.lokal/img/svg/black_h.png"/>
    </pattern>
</defs>

これは、パターンをパスに適用する方法です。

<path style="fill: url(#black_h)" d="M324 0 L324 375 L348 375 L348 0">

したがって、私が期待する動作は、パターンがパスの左上隅から始まり、両方向に繰り返されることです。しかし、私の例では、パターンは svg ドキュメントの左上隅から始まるため、y 座標が 24 の倍数である場合にのみパスが適切に見えます。

私がどこで立ち往生しているのか分かりますか？

前もって感謝します、

トビ

EDIT1：

jsfiddle での私の問題の小さな例を次に示します: http://jsfiddle.net/E3wBn/

EDIT2：

robertc からのアドバイスを使用して、例の svg を次のように変更しました。

http://jsfiddle.net/2DKXn/

また、後でどのように見えるかを示す jpg の例もアップロードしました。

http://www.img-share.net/uploads/oi1IcdPBVk.jpg

4

2 に答える 2

8

関連する属性と値はですがpatternContentUnits="objectBoundingBox"、期待どおりに機能しない場合があります。この値を指定するときは、使用している座標を次のように調整する必要があります。

<defs>
    <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="0.5" width="1" y="0" x="0" id="black_h">
         <image height="0.5" width="1" y="0" x="0" xlink:href="http://newlini.lokal/img/svg/black_h.png"/>
    </pattern>
</defs>

その後、すべてが適用されるオブジェクトに収まるようにスケールアップされます。使用した画像にアクセスできないため、上記のコードを直接テストすることはできませんでしたが、この同様の例を作成しました。このアプローチでは、基本的に、固定サイズの画像タイリングではなく、固定回数の繰り返しになることに注意してください。

Mozilla Developer NetworkにはSVGパターンの記述が長くなっています。簡単に実験できるように、その記事の2つの例をこのJSFiddleに入れました。

于 2012-09-18T11:49:39.947 に答える
0

Ok。この問題の可能な解決策は、パターンごとに 1 つの svg を作成し、それを「メイン」svg に含めることです。私はそれを試したことはありませんが、おそらくこれは合うでしょう。

それにもかかわらず、私たち (デザイナーと私) は、時間的なプレッシャーのために LinearGradients を使用することにしました。

<linearGradient id="black_h" y2="100%" x2="0%" y1="0%" x1="0%">
     <stop style="stop-color:#555555;stop-opacity:1" offset="0%">
     <stop style="stop-color:#1E1E1E;stop-opacity:1" offset="100%">
</linearGradient>

それは魅力のように機能します:)

皆さんの提案と助けに感謝します!

于 2012-09-19T10:14:31.403 に答える