8

最初にそれを定義する必要なしにこの勾配を達成することは可能<defs>ですか？

デバイス（スイッチ、ルーターなど）間のリンクのネットワーク負荷を示すネットワークマップに取り組んでいます。これはSVGを使用して描画しますが、開始（アップリンク）と終了（ダウンリンク）の色がバックエンドシステムからすでに与えられており、アプリケーションのテンプレート変数からアクセスできるため、すべてのグラデーションを定義したくありません。

何千ものリンク参照を追跡する必要がなく、すべてのグラデーションが「99.9％」になるため、すべてのリンクに適切なグラデーションを指定する必要があるため、コードを賢く実行する方がはるかに簡単なので、インラインスタイルを使用したいと思います。ネットワークマップに描画するすべての線（リンクロード）で一意である時間の

簡単に言えば、私はその線に沿って何かをすることができます <line stroke=<linearGradient...か？1つを定義し、それを参照する必要はありませんか？CSSのスタイルのように：<span style='color: blue'> .. </span>

<svg width="1024" height="800">
 <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
    </linearGradient>
  </defs>
<text x="50" y="50" fill="red">foo bar</text>a
<line stroke="url(#grad1)" x1="130.8757632890282"
      y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />
</svg>

（http://jsfiddle.net/GgJnB/）</ p>

4

2 に答える 2

4

データURI、つまりfill = "url（data：image / svg + xml; base64、... encode full svg ...＃mygradient）"を使用できます。

次に例を示します：http：//xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg

于 2012-05-29T12:05:40.470 に答える
3

まず第一に、私はおそらく質問をする前にこれを考えるべきでしたが、私の言い訳は私がまだsvgを学んでいるということです。そして、私の提案した答えもおそらく完全には正しくありません。下部にあるSVGParamsのコード例を参照してください。これはおそらく最良の解決策であり、グラデーションへのリンク参照の変化を追跡する必要はありません。

<g>ただし、以下に示すように、描画するすべてのリンク/線の中に次のコードをラップすることで問題を解決しました。

  <linearGradient id="gradientForLoopi" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
  </linearGradient>
  <line stroke="url(#gradientForLoopi)" x1="130.8757632890282"
     y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />

（私もおそらくそれを行う必要はありませんでしたが、d3jsをより簡単に操作できるように、セマンティックの目的で行いました）。

この分野でさらに調査を行うと、より良い解決策は、HTML5 doctype（SVGコンテキストヘッダー（？）で部分的にのみ機能し、内部ではインラインではない）のブラウザーで一般的に利用可能な場合にSVG Params<svg> （ドラフトをpr.writingとして）を使用することです。 HTML5ドキュメント）HTML5 doctypeが機能しないデモを参照してください。また、 svg content-type/.svgがここで機能するのと同じ-contentが機能します。<svg>

おそらく、プロトタイピングスクリプトを使用してSVG Paramsドラフトをすでに使用できますが、これは機能しませんでした。おそらく、「すべての一般的なブラウザー」では機能しません。

SVG Paramsを使用すると、単純に次のようになります（私は推測します）。

<defs>
    <linearGradient id="linkload" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:param(uplink_color);stop-opacity:1" />
          <stop offset="50%" style="stop-color:param(uplink_color);stop-opacity:1" />
          <stop offset="51%" style="stop-color:param(downlink_color);stop-opacity:1" />
          <stop offset="100%" style="stop-color:param(downlink_color);stop-opacity:1" />
    </linearGradient>
    <line stroke="url(#linkload)" x1="param(x1)"
        y1="param(y1)" x2="param(x2)" y2="param(y2)" />
</defs>

<use id="linkid" xlink:href="#linkload" x1="300" x2="0" y1="0" y2="300">
    <param name="downlink_color" value="#00ffff" />
    <param name="uplink_color" value="#006666" />
</use>
<use id="linkid" .. for every link..
于 2012-05-30T07:18:23.293 に答える