3

以下は、Chrome22.0.1229.79MacでレンダリングされたSVG画像のスクリーンキャプチャです。元のsvgはjsfiddleにあります：http： //jsfiddle.net/LGBk5/

左の画像は、SVG：sの膨張および侵食フィルターを使用して作成されています。右のものは、Illustratorのオフセットパス効果を使用して作成されています。

左側には問題があります。下部の境界線が歪んでいて、曲線がそれほど滑らかではありません。一方、太い黒の境界線はどちらも同じです。

私のSVGのパラメーターが間違っているのでしょうか、それとも拡張フィルターと侵食フィルターがバグのように見えるのでしょうか？

編集：目的はSVGでパスを薄くしたり太くしたりすることですが、この例によれば、侵食/拡張は信頼できるほど安定していません。

IllustratorオフセットパスとSVGの侵食および拡張フィルター

4

3 に答える 3

3

フィルタ効果はピクセルデータ（ラスタライズされたパス）に対して実行されますが、Illustrator（Inkscapeと同様）のパスオフセット操作は、元のパスデータ（または必要に応じてベクターデータ）を使用して実行されます。

前者はフォトショップフィルターを使用するようなもので、後者は既存のパスを使用して新しいパスを作成します。どちらも安定していますが、同じ操作ではありません。

于 2012-10-03T09:02:44.063 に答える
2

IllustratorのパスオフセットとSVGフィルターの侵食/拡張は異なる操作です。

この侵食フィルターは設計どおりに機能しています。ここにバグはありません。フィルタは、入力画像のすべてのピクセルについて、その周囲の長方形（半径）内の最大RGBA値を調べます。通常の画像では、これはより良い用語を求めて「長方形のハイライト」を生成する傾向があります。また、湾曲したドローパスに適用すると、奇妙なアーティファクトが発生します。仕様から：

拡張（または侵食）カーネルは、幅が2 * x半径、高さが2*y半径の長方形です。拡張では、出力ピクセルは、入力画像のカーネル長方形内の対応するR、G、B、A値の個々のコンポーネントごとの最大値です。侵食では、出力ピクセルは、入力画像のカーネル長方形内の対応するR、G、B、A値の個々のコンポーネントごとの最小値です。

だから、あなたの形の先のとがった端にあるその単一のピクセルを想像してみてください。フィルタに10ピクセルの「半径」がある場合（半径は円ではなく長方形を使用しているため、非常に誤解を招く用語であることに注意してください）。議論のために、100,100になっているとしましょう。フィルタが90,110から110,110の範囲のピクセルの値を処理するとき、その拡張半径は100,100でそのピクセルを検出し、その範囲のすべてのピクセルを黒く塗りつぶします。そして、ちょうどそのように、あなたの素敵な先のとがった端は直線に拡張されました。

于 2012-10-04T00:00:57.630 に答える
0

ネストされたストロークを使用して、ほとんどのオフセットパス効果を実現できることに注意してください（一部のストロークには、パスの内側または外側をトリミングするためのマスクがあります。

たとえば、次のように再実装されたOPのパスは次のとおりです。

<!-- Left drawing is made using erode and dilate -->
<!-- Right one is made by Illustrator's Offset Path -->
    
<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <path id="curve" d="M21.552,74.438c2.531-28.879,73.668-52.734,102.629-53.971
        c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.236-59.594-109.5-29.5c-23.367,27.833,55.4,142.969,55.4,142.969
        S18.109,113.708,21.552,74.438z"/>

    <mask id="inner">
      <use xlink:href="#curve" fill="white"/>
    </mask>
  </defs>

  <!-- this black outermost line -->
  <use x="10" y="10" xlink:href="#curve" style="stroke:black;stroke-width:26;stroke-linejoin:miter;stroke-miterlimit:10"></use>
  <!-- thick red outer line -->
  <use x="10" y="10" xlink:href="#curve" style="stroke:#f00;stroke-width:24;stroke-linejoin:miter;stroke-miterlimit:10"></use>    
  <!-- innermost black thin line, with green fill -->
  <use x="10" y="10"  xlink:href="#curve" style="fill:#1CFF00;stroke:black;stroke-width:32;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
  <!-- blue inner stroke -->
  <use x="10" y="10"  xlink:href="#curve" style="fill:none;stroke:#5555FF;stroke-width:30;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
  <!-- lastly, the black line -->
  <use x="10" y="10"  xlink:href="#curve" style="fill:none;stroke:black;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:10"></use>



<g transform="translate(210,10)">
    <path fill="#FF0000" stroke="#231F20" d="M126.273,201.917c-1.188-0.766-29.407-19.044-57.679-42.532c-41.739-34.676-60.31-60.754-58.441-82.068
        c1.575-17.974,18.042-34.105,48.943-47.945c21.673-9.707,48.782-16.997,65.925-17.729c1.023-0.043,2.057-0.065,3.096-0.065
        c26.722,0,55.103,13.789,67.484,32.787c7.866,12.07,9.101,25.736,3.476,38.482c-8.697,19.704-20.608,29.697-35.403,29.702
        c-0.002,0-0.007,0-0.01,0C144.382,112.551,127.62,95,111.407,78.028c-7.054-7.385-18.575-19.446-23.912-21.338
        c-1.086,2.002-6.186,15.821,20.666,67.477c16.226,31.214,35.475,59.438,35.668,59.72l35.977,52.589L126.273,201.917z"/>
<path fill="#5555FF" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" d="M22.939,78.438
    c2.531-28.879,73.668-52.734,102.629-53.971c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.237-59.594-109.5-29.5
    c-23.366,27.833,55.401,142.969,55.401,142.969S19.497,117.709,22.939,78.438z"/>

    <path fill="#00FF00" stroke="#231F20" d="M79.986,131.678C38.498,95.796,38.41,81.397,38.549,79.807c0.289-3.29,5.843-10.151,19.371-17.933
        C57.676,78.899,64.972,101.816,79.986,131.678L79.986,131.678z M163.665,84.044c-7.09,0-22.461-16.091-31.646-25.706
        c-5.867-6.143-11.433-11.969-16.966-16.846c4.324-0.776,8.128-1.238,11.184-1.368c0.621-0.027,1.249-0.04,1.88-0.04
        c16.911,0,36.471,8.903,43.603,19.846c3.317,5.089,2.508,8.623,1.278,11.408C168.884,80.659,165.163,84.043,163.665,84.044
        L163.665,84.044z"/>
    </g>
    
</svg>

于 2017-07-20T12:04:27.037 に答える