4

MuPDF からの SVG 出力を書いている最中で、SVG の機能の制限と思われるものに遭遇しました。これが既知の問題であり、既知の回避策がある場合 (または、私がばかげたことをしている場合) に備えて、ここで質問すると思いました。

次の SVG があります。

<?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600">
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<clipPath id="cp0">
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
</clipPath>
<g clip-path="url(#cp0)">
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/>
</g>
</svg>

これにより、ストローク パス (青の「[」のような形) が描画されます。次に、同じパスをクリッピング パスに設定し、クリッピング パスを赤で塗りつぶします。

クリッピング パスがパスのストローク バージョンに設定されることを期待していたので、赤いシェイプが青いシェイプを正確に上書きします。ただし、ここでのテストでは、パスの「塗りつぶしまたはストローク」は無視され、パスは「塗りつぶされ」ます。したがって、青い形状内に赤い四角形が描画されます。

私が望んでいた動作を取得する方法はありますか? それとも、パスを SVG に出力する前に、パスを手動で平坦化して線を引くコードを書く必要がありますか?

返信ありがとうございます。

4

1 に答える 1

4

svg のクリップ パスは、形状の特性ではなく形状であることを意図しているため、言い換えると、ストロークは含まれません。できることは、代わりにマスクを使用して、マスク内のパスのストロークを白に設定することです。

例を次に示します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
  <defs>
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
      <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
    </mask>
  </defs>

  <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
  <g mask="url(#m0)">
    <rect fill="yellow" x="0" y="0" width="600" height="600" />
  </g>
</svg>
于 2013-05-09T06:35:41.177 に答える