2021-04-26/2023-05-23

crip-pathが思うように動いてくれない

CSSのclip-pathでsvgの形で画像を切り抜こうとした際に思ったよりハマったのでメモ。

結論：svg内を「0-1」の範囲にする必要があり

利用しようとしたのは以下の方法です。

illustratorからsvgで書き出し
html内に配置
html内画像のcrip-pathでsvg指定

まず、svgをcrip-pathで使用できるようにillustratorから出力されたものを以下のように変更します。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.49 330.22"><path d="M381.31,337.52a16.55,16.55,0,0,0,15.82-11.6l38.34-121.63a16.59,16.59,0,0,0-15.82-21.57H188.91c-.12,0-.24,0-.35,0L183.38,148A16.59,16.59,0,0,0,167,133.88H104.32a16.59,16.59,0,0,0,0,33.17h48.36L175.77,322.1,151.31,392A16.61,16.61,0,0,0,167,414h2.1a28.54,28.54,0,1,0,37,0H350.41a28.53,28.53,0,1,0,37,0h4.38a16.59,16.59,0,0,0,0-33.18H190.35l15.17-43.32Z" transform="translate(-87.74 -133.88)" style="fill:#231815"/></svg>

<svg width="0" height="0" position="absolute" viewBox="0 0 1 1">
		<defs>
			<clipPath clipPathUnits="objectBoundingBox" id="mask--cart">
				<path d="M381.31,337.52a16.55,16.55,0,0,0,15.82-11.6l38.34-121.63a16.59,16.59,0,0,0-15.82-21.57H188.91c-.12,0-.24,0-.35,0L183.38,148A16.59,16.59,0,0,0,167,133.88H104.32a16.59,16.59,0,0,0,0,33.17h48.36L175.77,322.1,151.31,392A16.61,16.61,0,0,0,167,414h2.1a28.54,28.54,0,1,0,37,0H350.41a28.53,28.53,0,1,0,37,0h4.38a16.59,16.59,0,0,0,0-33.18H190.35l15.17-43.32Z" transform="translate(-87.74 -133.88)" style="fill:#231815"/>
			</clipPath>
		</defs>
	</svg>

clip-pathを利用するための基本的な形です。<clippath>を用意し、利用し易いようにidを振っておきます。

ですが、これではできませんでした。何も表示されないのです。元の画像もです。

1時間近くWeb上を彷徨ったところついに原因を発見できました。

どうやらclip-pathでは「0-1」の範囲で指定してあげなければいけないらしいです。

illustratorで出力したSVGに「transform=”translate(-87.74 -133.88)”」が付属しています。この部分が「0-1」内に収まっていないのでアウトだったようです。

「SVGOMG」というWebアプリケーションでillustratorから出力されたSVGをきれいにしてから、crip-path用に書き換えてあげると正常に動作しました。

書き換え後が以下の形

<svg width="0" height="0" position="absolute" viewBox="0 0 1 1">
		<defs>
			<clipPath clipPathUnits="objectBoundingBox" id="mask--cart">
				<path d="M293.57 203.64a16.55 16.55 0 0015.82-11.6l38.34-121.63a16.59 16.59 0 00-15.82-21.57H100.82l-5.18-34.72A16.59 16.59 0 0079.26 0H16.58a16.59 16.59 0 000 33.17h48.36l23.09 155.05-24.46 69.9a16.61 16.61 0 0015.69 22h2.1a28.54 28.54 0 1037 0h144.31a28.53 28.53 0 1037 0h4.38a16.59 16.59 0 000-33.18H102.61l15.17-43.32z"></path>
			</clipPath>
		</defs>
	</svg>

また、transform内の部分をjavascriptで変換する方法も試してみたのですが、こちらはうまくいきませんでした。

記事の内容