Q&A
質問文にある画像ではダメ、ということですよね。
欲しい図形を手で描いて図示することはできますか?
前提・実現したいこと
html, css, javascriptを使って、svgタグのpath操作を学習しています。
その中でpath（閉じられたもの）変形のロジックがなかなか思い浮かばないので質問をさせていただけたらと思います。
詳しいコードは書いていただかなくても結構ですので、こんな風にしたら実現できる、というようなヒントをご教示していただけたら幸いです。
よろしくお願いいたします。
生成したいpath条件
- 拡大する前後のpathをPath1, Path2とします。
- Path1の任意の点p1の接線に引いた垂線をhとします。
- 垂線h上にある、点p1からの距離mの点をp2とし、p2の集合がPath2となります。
- path1は閉ざされた図形で、点p2は図形の内側または外側に統一します。
と、かなり小難しく書いてしまいましたが、要約すると以下の画像です。
下記コードで表示されるSVGイメージ
2021/08/15追記
上記画像は求めている変形ではなかったので、求めている変形を図示した画像を添付いたします。
下手な画像で申し訳ありませんがご参考にしていただけますと幸いです。
発生している問題
うまいこと上述の通りの拡大ができません。
該当のソースコード
html
1<svg id="svg" viewBox="0 0 1700 1000" width="1700" height="1000"> 2 <path id="Path1" d="M150 0 L75 200 L225 200 Z" fill="none" stroke="black" transform="translate(0, 150)"></path> 3 <path id="Path2" d="M150 0 L75 200 L225 200 Z" fill="none" stroke="black" transform="scale(2, 2) translate(-75, 0)"></path></svg>
試したこと
この拡大縮小をしようとした当初、transform="scale(n,m)"で簡単に実現できると思っていました。
しかし実際にトライしてみた結果、上述のように合同なpathが生成されはしますが、各辺からは等しくありません。
※上記pathが上下左右対称であるきはscaleを使ってうまくいきます。
各点の接戦をもとめて、推薦を引いて距離を求めていく方法なども考えましたが、もっと簡単に実現したいです・・・
みなさまにお力添えをいただきたくおもいます。
何卒よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
html, css, javascript, svg バージョンはとくに問いません。
int32_t様、ご回答ありがとうございます。
>>質問文にある画像ではダメ、ということですよね。
左様でございます。説明不足で申し訳ございません・・・
>>欲しい図形を手で描いて図示することはできますか?
新たに参考画像を追記いたしました。
→2021/08/15追記
ご回答おまちしております。
何卒よろしくおねがいいたします。
ダメな例と欲しい例の左は縮尺が違うだけで同じでは? 欲しい例でも、辺と辺の距離と頂点と頂点の距離は違いますよね。
頂点がどうなって欲しいのかよくわかりません。
たびたびのご回答ありがとうございます。
>>頂点と頂点の距離は違いますよね。
申し訳ありません。int32_t様のご回答で、納得いたしました。同じ形を拡大させて今回の実現したいことを達成させるのは不可能ですね・・・
>>縮尺が違うだけで同じでは?
そのとおりでございます。
問題は縮尺と位置ですね・・・
以上を踏まえてもう一度考え直してみます。
何度もご回答いただきありがとうございました。
あなたの回答
tips
プレビュー
