3

4つのポイントを描画し、各ポイントの色を変えて線形グラデーションで領域を塗りつぶす必要があります。HTML5、SVG、またはその他の「ブラウザ」でこれを行うことは可能ですか？

ありがとう。

4

1 に答える 1

4

このフィドルで次のコードを試しました

<svg height="500" width="500">
    <linearGradient id="R">
        <stop offset="0" stop-color="red" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>

    <linearGradient id="G" gradientTransform="rotate(180 0.5 0.5)">
        <stop offset="0" stop-color="green" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="B" gradientTransform="rotate(270 0.5 0.5)">
        <stop offset="0" stop-color="blue" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>

    <path d="M 100,100 L 300,100 L 200,300 Z" fill="url(#R)"/>
    <path d="M 300,100 L 100,100 L 200,300 Z" fill="url(#G)"/>
    <path d="M 200,300 L 300,100 L 100,100 Z" fill="url(#B)"/>
</svg>

この結果を得る

線形勾配の重ね合わせのサンプル

HTH

編集私は改善して4ポイントに拡張しようとしました：更新されたフィドルを参照してください。あなたの質問は、SVG構造化の基本を学ぶのに役立ちました。

<svg height="500" width="500">

    <linearGradient id="R" gradientTransform="rotate(45 .5 .5)">
        <stop offset="0" stop-color="red" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="G" gradientTransform="rotate(135 .5 .5)">
        <stop offset="0" stop-color="green" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="B" gradientTransform="rotate(225 .5 .5)">
        <stop offset="0" stop-color="blue" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="Y" gradientTransform="rotate(315 .5 .5)">
        <stop offset="0" stop-color="yellow" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <defs>
        <path id="P" d="M 100,100 L 300,100 L 300,300 L 100,300 Z"/>
    </defs>
    <use xlink:href="#P" fill="url(#R)"/>
    <use xlink:href="#P" fill="url(#G)"/>
    <use xlink:href="#P" fill="url(#B)"/>
    <use xlink:href="#P" fill="url(#Y)"/>
</svg>

私たちと遊ぶと異なる結果が得られることに注意する価値がstop offset="0"あります...ここで基本的なこと：

ここに画像の説明を入力してください

于 2012-06-16T22:11:17.893 に答える