重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

おしえて

svgクリップパスの応用コーディング方法

解決済

  • 質問者：25taku
  • 質問日時：
  • 回答数：2件

長方形のjpgを使って添付画像のようなコーディング（レスポンシブ対応）をしたいです。

試したこと
１.svgのクリップパスで画像をくり抜き（波線がはみ出している箇所は除く）
２.背景画像に上記svgを設定（黒いラインを付与するため）
３.波線ラインの画像は別に書き出して、絶対指定でちょうど良い位置に配置

上記のやり方だとレスポンシブ時に波線の位置がずれてしまい、うまくいきませんでした。

左下部分を波線含む三角形の画像でまるごとかぶせるやり方も考えましたが、
背景が単色ではないケースの時に対応できません。

良いアイデアがあったら、ご教授いただけますと幸いです。

「svgクリップパスの応用コーディング方法」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



＞波線部分のパスのコードを抜き出す方法はあるのでしょうか。
＞パスの加工方法がよくわかっていないため、普段は書き出した
＞svg画像のコードをコピペするぐらいのことしかできないレベルです。
私の方はパス化するツールすら無い環境なので、回答の際に、以下のサイトで30分ほど学習して、手計算で作成しています。
https://developer.mozilla.org/ja/docs/Web/SVG/Tu …

ご提示のパスであれば、
　M440.5,.5
　H.5
　V208.65
　c.96,.75,1.96,1.62,3.02,2.68,
　9.92,9.92,4.62,15.23,14.54,25.16,
　9.93,9.92,15.23,4.62,25.16,14.54,
　9.92,9.92,4.62,15.23,14.54,25.16,
　9.93,9.93,15.23,4.62,25.16,14.54,
　3.75,3.75,5.33,6.84,6.37,9.77
　H440.5
　V.5Z
に分解できるので、水平線、垂直線（H、V）を除いた、cの部分が波線に該当します。
（始点の設定は必要になります。）
これが、外側にはみ出した部分を含んでいるのかどうかは、こちらではわかりません。
（全体の構造が不明ですが、あくまでもclip対称のみで、外側の線は含まないのかも・・）


＞また、記載いただいたコードに対して横長の写真を設定したところ、
＞写真の縦横比が崩れてしまったのですが、これを防ぐ方法はないでしょうか。
＞写真の縦横比をパス側の縦横比に合わせるしかないでしょうか。
No1で回答しているのは、あくまでも「考え方」です。
要は、『同じSVGを用いて描画すればずれることはないのでは？』ということです。
とは言え、質問者様に言葉だけで意味が通じるのかどうかわからなかったので、検証のためのサンプルとして具体例を付け足したものです。
ですので、そのまま使うようなことはまったく想定していません。
（波線も適当ですし）
回答者様のデータ構造が不明でしたので、それに「考え方」を応用してくださればよいものとしました。


波線部分は左下だけなので、横方向の長さだけ伸縮させると考えれば、SVGの修正も比較的簡単です。
（ただし、以下の※1のような問題もあります）
画像のサイズが固定比なら、ソースを修正することで対応できます。
比率を可変にするにはスクリプトが必要になると思われます。

例えば、縦横比を1：2にするのなら、No1のソースの該当部分を以下のように修正するとで、とりあえずは可能です。
#wrap>div {width:60vw; height:30vw; ｝//サイズを1：2に修正
#wrap img { margin:1.5vw 3vw; } //マージン5%に仮定してしまったので・・（※1）
<svg viewBox="0 0 200 100"　　//サイズを1：2に修正
<path transform="scale(0.005,0.01)"　//1：2の記述を1：1に正規化
d="M0 0 L0 70
Q10 70 10 80 Q10 90 20 90 Q30 90 30 100
L200 100 L200 0 Z" />　// Boxサイズを右側に引き延ばす

（※1）最初の設定で正方形にしてしまったので、外側の空きを5%としてしまいましたが、矩形の場合は％だとスペースの幅が変わってしまいます。
同じmaginを設定したければ、div要素内にもう一つdiv（=実サイズ比になるように）を設定して、その中に100％で画像を入れておくような方法をとるのが宜しいでしょう。
（clipはあくまでも外側のdivに設定しておくのが、線を合わせる上で簡単だと思います）
固定値のmarginの場合、包含要素の縦横比が不定になってしまいますが、CSSのcalcで「指定比率+固定margin」となるように計算させれば、画像要素の比率に合わせることが可能になると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
考え方について理解できましたので、
あとは画面を見ながらの調整で対応できそうです。

通報する
お礼日時：2022/04/11 13:05

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



現状でどのようになさっているのか具体的な内容が不明ですけれど・・

波線ラインが外側にはみ出しているのがちょっと面倒ですが、clipPathと同じSVG（の一部）を利用して上から線描きで重ねれば、ずれることはないのではないでしょうか。

以下、ごく簡単な例でテストしてみた内容です。
ご参考にでもなれば。
　・手入力なので、パスの計算が簡単なように正方形の包含要素にしてあります
　・波線は適当に描いてありますので、形が悪いとかはご容赦
　・外側のはみ出し部分は、包含要素の5%分で固定にしてあります
Chrome、fxにて確認。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrap {
position:relative;
width:50vw; height:50vw;
}
#wrap>div {
width:100%; height:100%;
overflow:hidden;
clip-path:url(#clip1);
}
#wrap img {
margin:5%;
width:90%; height:90%;
}
#wrap svg {
width:100%; height:100%;
position:absolute; top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<div><img src="./img/photo01.jpg" /></div>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M0 70
Q10 70 10 80 Q10 90 20 90 Q30 90 30 100"
fill="none" stroke="black" stroke-width=0.5 />

<clipPath id="clip1" clipPathUnits="objectBoundingBox">
<path transform="scale(0.01,0.01)"
d="M0 0 L0 70
Q10 70 10 80 Q10 90 20 90 Q30 90 30 100
L100 100 L100 0 Z" />
</clipPath>
</svg>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

写真をトリミングするsvgのコードから、
波線部分のパスのコードを抜き出す方法はあるのでしょうか。
パスの加工方法がよくわかっていないため、
普段は書き出したsvg画像のコードをコピペするぐらいのことしかできないレベルです。
例えば下記のコードを加工して波線部分のコードを別途作成することは可能ですか。
下記はメインの質問に添付した写真のトリミング部分に該当するsvgになります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441 301"><defs><style>.d{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs><g id="a"/><g id="b"><g id="c"><path class="d" d="M440.5,.5H.5V208.65c.96,.75,1.96,1.62,3.02,2.68,9.92,9.92,4.62,15.23,14.54,25.16,9.93,9.92,15.23,4.62,25.16,14.54,9.92,9.92,4.62,15.23,14.54,25.16,9.93,9.93,15.23,4.62,25.16,14.54,3.75,3.75,5.33,6.84,6.37,9.77H440.5V.5Z"/></g></g></svg>


また、記載いただいたコードに対して横長の写真を設定したところ、
写真の縦横比が崩れてしまったのですが、これを防ぐ方法はないでしょうか。
写真の縦横比をパス側の縦横比に合わせるしかないでしょうか。

ご確認お願い致します。

通報する
お礼日時：2022/04/10 14:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報