SVGを使用して既存のコードから大きな上向き三角形を生成

Question

Tympanusの次のコードを使用して、大きな下向き三角形を生成しています。私がしようとしているのは、同じテクニックを使用して、大きな上向きの三角形を生成することです。どのようにこれを達成するためにこのコードを微調整するか知っていますか？

ご協力いただき誠にありがとうございます。

よろしく...

svg#bigTriangleColor { 
 
    pointer-events: none; 
 
} 
 
.container svg { 
 
    display: block; 
 
} 
 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 
#bigTriangleColor path { 
 
    fill: #3498db; 
 
    stroke: #3498db; 
 
    stroke-width: 2; 
 
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> 
 
<path d="M0 0 L50 100 L100 0 Z"></path> 
 
</svg>

Answer 1

あなたは簡単にSVGパスにline commandsを理解することを行うことができます。

私たちがここに持っているもの：

<path d="M0 0 L50 100 L100 0 Z"></path> 

は言う：（0,0）へ

移動し、（50100）に行くラインを作り、他のラインは（100,0に行く作ります）、パスを閉じます。

ので、三角形を反転させるために、あなただけの必要があります。

<path d="M0 100 L50 0 L100 100 Z"></path> 

をbasicaly言うどの：（0100）に

移動は、（50,0）に行くラインを作ります別の行を（100,100）にしてパスを閉じます。

デモチェック：

svg#bigTriangleColor { 
 
    pointer-events: none; 
 
} 
 
.container svg { 
 
    display: block; 
 
} 
 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 
#bigTriangleColor path { 
 
    fill: #3498db; 
 
    stroke: #3498db; 
 
    stroke-width: 2; 
 
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
<path d="M0 100 L50 2 L100 100 Z"></path> 
 
</svg>

Answer 2

をあなただけの変換を使用して逆さまにそれを描くことができます。

• 今上から下ではなく、下から上へ描画することになるだろうと（移動にそれを翻訳します。
• 規模はy方向

svg#bigTriangleColor { 
 
    pointer-events: none; 
 
} 
 
.container svg { 
 
    display: block; 
 
} 
 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 
#bigTriangleColor path { 
 
    fill: #3498db; 
 
    stroke: #3498db; 
 
    stroke-width: 2; 
 
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> 
 
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path> 
 
</svg>

でそれを反転します