javascriptで背景要素をSVGに付与したい。

作りたいものは「あるボタンを押した後にSVGの画像(pathタグ描画)をクリックすると、SVGの画像(pathタグ描画)の背景がボタンの背景と同じものになる」というものです。

条件としては以下を想定しています。
・jacascript（クリックで要素を取得、付与）
・カラーではなく斜線のような柄で色付けしたいです。

自身で調べてはいますが、なかなかこれといったものが無く、また自身にも知識がないのでこちらでご教示いただけないかと思っています。

《ご教示いただきたいこと》
・svgのpathに斜線が入った要素を組み込めるのかどうか。
※コードを教えていただきたいのではなく、考えているものが実現可能なのか、あるいは良い方法があるのかどうか知りたいです。

イメージを少しでも持っていただけるよう最低限のコードを以下に示します。左のボタンを押した後に図形をクリックすると図形がボタンと同じ柄になるという感じです。

HTML
1<div class="wrapper">
2    <div class="button-area">
3      <button onclick="buttonClick()" class="priColor" id="default" style="background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #000000), color-stop(.5, transparent), to(transparent));
4            -webkit-background-size: 5px;;width:13%;">&nbsp;</button>
5      <button onclick="buttonClick()" class="priColor" id="bold" style="background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #000000), color-stop(.5, transparent), to(transparent));
6            -webkit-background-size: 10px;;width:13%;">&nbsp;</button>
7    </div>
8    <div class="illust-area">
9      <svg class="triangle" >
10        <path d="M50 0 L0 100 L100 100 Z" fill="red"></path>
11    </svg>
12    </div>
13  </div>

css
1.wrapper{
2  width:100%;
3  height:auto;
4  display:flex;
5}
6.button-area{
7  width:50%;
8  height:auto;
9  margin:0 auto;
10  text-align:center;
11  padding-top:50px;
12}
13
14
15.pricolor{
16width:80px;
17height:50px;
18}
19
20.illust-area{
21  width:50%;
22  margin:0 auto;
23  padding-top:30px;
24}
25.triangle{
26  width:100px;
27  height:100px;
28  
29}

tino1231

2021/03/16 11:27

https://teratail.com/help/question-tips#questionTips3-3-1 これを参考に、コードは見やすくした方がよいですよ。

wa-so

2021/03/16 11:39

ご指摘ありがとうございます。

int32_t

2021/03/17 00:13

今のままだと丸投げ作業依頼になってしまってます。まずはJavaScriptのコードを少しでも書きましょう。そして、どこがわからないのかをより詳細にしてください。

wa-so

2021/03/17 00:42

ご指摘ありがとうございます。今回の投稿は目標物を作るためのプロセスとして考え方が適切なのか、もしくは実現が難しい物なのかを教えていただけたらという趣旨のものです。言葉足らずで申し訳ないです。ご丁寧にコメントくださり、ありがとうございます。

int32_t

2021/03/17 01:02 編集

なるほど。しかしながら、まだ質問者さんが何をわかっていて何がわからないのかが明確でなく、答えにくいですね。・質問文にある「斜線が入った要素」とは何のことでしょうか? ・SVG の path の fill 色をJavaScripで動的に変更できることをご存知ですか?

wa-so

2021/03/17 01:13

おっしゃる通りですね。私も分かっていないことが多いのでこのような書き方になってしまいました。「斜線が入った要素」はボタンのst yleのことでこれを図形に要素として移せないかと考えています。動的に変える方法も分かっている範囲で明記させていただきますので、少しお時間いただいて改めて質問内容を修正させていただきますね。