Как применить clipPath к div с позицией clipPath относительно позиции div

Question

Не уверен, правильно ли сформулировал заголовок, но здесь возникает вопрос.

У меня есть SVG-путь облачной формы, который я бы хотел использовать в CSS с свойством clip-path.

<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z" fill="lightblue" /> 

Когда я добавить элемент SVG в HTML и определить <clipPath> с этим путем, браузер позиционирует отсечения пути в верхнем левом углу. Если я применяю маржу к обрезаемому элементу, маска не связана и остается в исходном положении.

Другие аналогичные потоки утверждают, что атрибут clipPathUnits="objectBoundingBox" должен быть добавлен к объекту <clipPath>, но это, похоже, не решает мою проблему. Я даже преобразовал путь от абсолютного к относительному и пробовал это так, но получил тот же результат.

Возможно ли каким-либо образом связать обтравочный контур с обрезанным элементом, чтобы при позиционировании на обрезанный элемент перемещался также путь отсечения?

Вот относительный путь, если он помогает:

<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" /> 

Как и некоторые тест HTML/CSS. (Я установил left10px свойства, так что вы видите проблемы подрезок происходит)

.clippedElement { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    background-color: lightblue; 
 
    -webkit-clip-path: url(#cloudClip); 
 
    -moz-clip-path: url(#cloudClip); 
 
    clip-path: url(#cloudClip); 
 
}

<svg> 
 
    <defs> 
 
    <clipPath id="cloudClip"> 
 
     <path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z" 
 
     /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<div class="clippedElement"></div>

Answer 1

Благодаря Robert's comment, я был в состоянии решить эту проблему я имел.

Вот PHP фрагмент я использовал для преобразования абсолютного пути к относительному, так что значения между 0 и 1.

$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z"; 
function regex_callback($matches) { 
    static $count = -1; 
    $count++; 
    $width = 98; 
    $height = 70; 
    if($count % 2) { 
     return $matches[0]/$height; 
    } else { 
     return $matches[0]/$width; 
    } 
} 

$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path); 

Поскольку путь отсечения не является прямоугольным, я не мог разделить значения с одним номером, но должны были использовать ширину и высоту самого обтравочного контура.

.clippedElement { 
 
    width: 98px; 
 
    height: 70px; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    background-color: lightblue; 
 
    -webkit-clip-path: url(#cloudClip); 
 
    -moz-clip-path: url(#cloudClip); 
 
    clip-path: url(#cloudClip); 
 
}

<svg width="98" height="70"> 
 
<defs> 
 
    <clipPath id="cloudClip" clipPathUnits="objectBoundingBox"> 
 
     <path d="M0.47940791326531,0.88376853142857 C0.42864807040816,0.95549795142857 0.3579178244898,1 0.27968550408163,1 C0.12521946530612,1 0,0.82651034 0,0.6125 C0,0.47064633714286 0.055015293877551,0.34659547428571 0.13709690102041,0.2790703 C0.15119605510204,0.12175503485714 0.24803319489796,0 0.36539557755102,0 C0.44827044387755,0 0.52091058571429,0.060712032857143 0.56141010204082,0.15178580714286 C0.59426133367347,0.12674508114286 0.63200367244898,0.1125 0.67214742040816,0.1125 C0.79920819387755,0.1125 0.90221130204082,0.25520923571429 0.90221130204082,0.43125 C0.90221130204082,0.45943181571429 0.89957155816327,0.48675941714286 0.89461595816327,0.51278406428571 L0.89461595816327,0.51278406428571 C0.95258663571429,0.55264938571429 0.99243243265306,0.63550269714286 0.99243243265306,0.73125 C0.99243243265306,0.86586940714286 0.91366534897959,0.975 0.81650122857143,0.975 C0.77024686836735,0.975 0.72816159897959,0.95026909428571 0.69675813163265,0.90983054428571 C0.66899289183673,0.93522066142857 0.63572744081633,0.95 0.59997051632653,0.95 C0.55331260408163,0.95 0.51089684897959,0.92483567714286 0.47940791326531,0.88376853142857 Z"></path> 
 
    </clipPath> 
 
</defs> 
 
</svg> 
 
<div class="clippedElement"></div>