5

SVG クリップ パスのスケーリング動作に苦労しています。適用される要素のサイズに合わせてクリップ パスをスケーリングしたいと考えています。clipPath ユニットについて読んできましたが、これを機能させることができません。

スケーリングなしで私がやろうとしていることの例を次に示します: http://jsfiddle.net/1196o7n0/1/

...そして SVG (メイン形状とクリップパス形状はまったく同じです):

<svg width="800" height="600"  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <clipPath id="svgPath">
        <circle r="40" cy="50" cx="50" />
        <circle r="74.576" cy="235" cx="193.949" />
        <circle r="47.034" cy="108.305" cx="426.576" />
        <circle r="43.644" cy="255.763" cx="346.915" />
        <circle r="35.17" cy="82.882" cx="255.39" />
  </clipPath>
  <g fill="#000">
    <circle r="40" cy="50" cx="50" />
    <circle r="74.576" cy="235" cx="193.949" />
    <circle r="47.034" cy="108.305" cx="426.576" />
    <circle r="43.644" cy="255.763" cx="346.915" />
    <circle r="35.17" cy="82.882" cx="255.39" />
  </g>
</svg>

ビューボックスを定義して、ドキュメントの幅と高さに合わせて SVG をスケーリングすると、クリップ パスがスケーリングされないように見えます: http://jsfiddle.net/1196o7n0/2/

これをどのように機能させることができるかについてのアイデアはありますか? 私は何かを見逃していますか？

4

2 に答える 2

11

clipPathUnits="objectBoundingBox"適用する要素に合わせてクリップ パスをスケーリングするには、要素に追加する必要がありますclippath。

これは、これを行う方法を示す例に基づいたJsFiddleです。

<svg width="0" height="0" >
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <circle r="0.05" cy="0.0625" cx="0.1625" />
            <circle r="0.09322" cy="0.29375" cx="0.2424" /> 
            <!-- rest of path here-->
        </clipPath>
    </defs>
</svg>
<div class="content centered">
    <div class="clipped"></div>
</div>

注意点として、パスの単位は 0 から 1 までの 10 進数である必要があります。これらは、対応する要素の幅または高さの分数を表します。

于 2015-10-24T09:04:45.680 に答える