teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

補足の追加

2019/10/06 10:14

投稿

barchi118
barchi118

スコア4

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,6 @@
1
+ ```ここに言語を入力
2
+ コード
1
- ### 前提・実現したいこと
3
+ ```### 前提・実現したいこと
2
4
  React でhttps://taroken.org/portfolio/のコピーサイトを作っております。
3
5
  実現したいことはReactのコンポーネント内に上記のサイトのsvgタグ部分をReactで表示させることです。
4
6
 
@@ -15,15 +17,29 @@
15
17
 
16
18
  }
17
19
  ### 該当のソースコード
18
- ```ここに言語を入力
19
- コード
20
- <style>.pJaJHXbj_0{stroke-dasharray:2284 2286;stroke-dashoffset:2285;}.start .pJaJHXbj_0{animation:pJaJHXbj_draw 12700ms linear 0ms forwards;}.pJaJHXbj_1{stroke-dasharray:2144 2146;stroke-dashoffset:2145;}.start .pJaJHXbj_1{animation:pJaJHXbj_draw 12700ms linear 2300ms forwards;}@keyframes pJaJHXbj_draw{100%{stroke-dashoffset:0;}}@keyframes pJaJHXbj_fade{0%{stroke-opacity:1;}81.81818181818181%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>
21
20
 
22
21
 
22
+
23
23
  ### 試したこと
24
24
  :を消したり、styleタグを消したりする。
25
25
  ここに問題に対して試したことを記載してください。
26
26
 
27
27
  ### 補足情報(FW/ツールのバージョンなど)
28
-
28
+ view-source:https://taroken.org/portfolio/
29
+ ・svgファイルのコードについてはこちらのサイトの73行目から85行目までコピーして使っております。
30
+ (文字数が1万字を超えてしまうためこちらにsvgファイルのコードを記載することができませんでした。)
31
+ ・svgを表示しているコンポーネント側のソースです。
32
+ ```
33
+ <div className="main parallax1">
34
+ <div className="gradient">
35
+ <div className="maincontent">
36
+ <h1>
37
+ <img src='icon.svg' />
38
+ </h1>
39
+ <div className="downbtn">
40
+ <a href=""><i className="fa fa-angle-down" aria-hidden="true"></i></a>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </div>
29
45
  ここにより詳細な情報を記載してください。

1

コードの埋め込みにタグを使いました。

2019/10/06 10:14

投稿

barchi118
barchi118

スコア4

title CHANGED
File without changes
body CHANGED
@@ -15,7 +15,9 @@
15
15
 
16
16
  }
17
17
  ### 該当のソースコード
18
- <style>.pJaJHXbj_0{stroke-dasharray:2284 2286;stroke-dashoffset:2285;}.start .pJaJHXbj_0{animation:pJaJHXbj_draw 12700ms linear 0ms forwards;}.pJaJHXbj_1{stroke-dasharray:2144 2146;stroke-dashoffset:2145;}.start .pJaJHXbj_1{animation:pJaJHXbj_draw 12700ms linear 2300ms forwards;}@keyframes pJaJHXbj_draw{100%{stroke-dashoffset:0;}}@keyframes pJaJHXbj_fade{0%{stroke-opacity:1;}81.81818181818181%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>
18
+ ```ここに言語を入力
19
+ コード
20
+ <style>.pJaJHXbj_0{stroke-dasharray:2284 2286;stroke-dashoffset:2285;}.start .pJaJHXbj_0{animation:pJaJHXbj_draw 12700ms linear 0ms forwards;}.pJaJHXbj_1{stroke-dasharray:2144 2146;stroke-dashoffset:2145;}.start .pJaJHXbj_1{animation:pJaJHXbj_draw 12700ms linear 2300ms forwards;}@keyframes pJaJHXbj_draw{100%{stroke-dashoffset:0;}}@keyframes pJaJHXbj_fade{0%{stroke-opacity:1;}81.81818181818181%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>
19
21
 
20
22
 
21
23
  ### 試したこと