1

12 月上旬に、SVG で作成された派手な境界線を持つ HTML テーブルを使用して、Chrome で開発された Web ページを作成しました。テーブル セルのサイズが不明なため、相対 (%) 座標を使用して下と右の境界線を取得する必要があります。したがって、線要素を使用する必要があります。stroke='url(#...)' メソッドを使用してこれらの行をパターンで埋めることができます。ここで、... はローカルの defs セクションのパターン要素です。これは Chrome では機能しなくなりましたが、Safari と Firefox では機能します。非常によく似た fill='url(#...)' が Chrome で機能していますが、相対アンカー座標では使用できません。

誰かがこれに遭遇しますか？

テストケースは次のとおりです。

<svg patternUnits='userSpaceOnUse' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'>

<defs>
    <pattern id='utrim' height='10' width='10' patternUnits='userSpaceOnUse' >
                <rect height='10' width='5' fill='green' />
    </pattern>

    <pattern id='utrim2' height='10' width='10' patternUnits='userSpaceOnUse' >
                <rect height='10' width='5' fill='red' />
    </pattern>

</defs>

<g > 
    <line x1='0' y1='0' x2='100%' y2='0' stroke-width='20' stroke='url(#utrim)' />
    <rect x='0' y='0' width='100%' height='5' fill='url(#utrim2)' />
</g> 

</svg>
4

3 に答える 3

1

さて、私はこれをChromiumに報告しました。

塗りつぶされた長方形でこれを回避する方法を見つけました。ビューポートの下端と右端のすぐ先に長方形を配置し、transform ='translate（...）'を使用して長方形を引き戻し、パターンで塗りつぶすことができます。パターンは、それが埋めているスペースの寸法に一致しますが、これは私が気付いていなかったものであり、すべてが必要な方法で機能するようになっています。

于 2013-02-12T19:07:47.660 に答える