<!-- 表示されないようにwidth="0"を指定 -->
<svg width="0" height="0" viewBox="0 0 800 600">
<clipPath id="clip-source" clipPathUnits="objectBoundingBox">
<path transform="scale(<?php echo number_format(1 / 800, 10); ?>, <?php echo number_format(1 / 600, 10); ?>)" d="~~~~~~"/>
</clipPath>
</svg>
<div class="clip-target-1"></div>
<style>
.clip-target-1 {
/* url以外にもpathも指定可能 */
clip-path: url(#clip-source);
}
</style>
<div class="clip-target-2"></div>
<style>
.clip-target-2 {
/* clip-pathとは違い、透過情報を適用可能 */
mask-image: url(#clip-source);
mask-repeat: no-repeat;
mask-position: 0 0;
mask-size: 50%;
}
</style>
<div class="clip-target-3">sample</div>
<style>
.clip-target-3 {
background-image: url(#clip-source);
background-clip: text;
color: transparent;
}
</style>
<!-- svg要素で直接処理する場合 -->
<svg width="800" height="600" viewBox="0 0 800 600">
<defs>
<!-- mask 要素も可能 -->
<clipPath id="clip-source">
<path d="~~~~~~" />
</clipPath>
</defs>
<rect x="0" y="0" width="100%" height="100%" clip-path="(#clip-source)"/>
</svg>clipPathUnits=”objectBoundingBox”によって、切り抜くパスのサイズを切り抜きたい要素のサイズに応じて相対的に変更するという設定となる。
また切り抜くパスを0から1の範囲で標準化するため、transformを用いて縮小する。ただしsvgではcalc関数は使用できないため、手動で計算するかphp使える環境であれば、そちらを利用した方が良い。