1

スライダー SVG 画像

灰色の領域の幅を変更し、1 から 100 までの値に基づいて円レイヤーを移動しようとしています。

SVG 画像で D3.js を使用しています。以下はsvg画像のコードですが、パスタグにはそれを行うための直接の属性がないため、幅を変更できません。

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2480px" height="3508px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2480 3507.43">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#989B9F;stroke-width:2.08354}
    .str1 {stroke:#989B9F;stroke-width:2.08354}
    .str2 {stroke:#989B9F;stroke-width:2.08354}
    .fil0 {fill:url(#id0)}
    .fil1 {fill:url(#id1)}
    .fil2 {fill:url(#id2)}
   ]]>
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="301.84" y1="146.253" x2="301.84" y2="122.891">
   <stop offset="0" style="stop-color:#D7D9DC"/>
   <stop offset="1" style="stop-color:white"/>
  </linearGradient>
  <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="191.679" y1="122.891" x2="191.679" y2="146.253">
   <stop offset="0" style="stop-color:#D7D9DC"/>
   <stop offset="1" style="stop-color:#42494C"/>
  </linearGradient>
  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="259.354" y1="155.487" x2="259.354" y2="113.657">
    <stop offset="0" style="stop-color:#D7D9DC"/>
   <stop offset="1" style="stop-color:white"/>
  </linearGradient>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0 str0" d="M470.747 146.253l-337.814 0c-6.42438,0 -11.6808,-5.25642 -11.6808,-11.6808l0 0c0,-6.42438 5.25642,-11.6808 11.6808,-11.6808l337.814 0c6.42438,0 11.6808,5.25642 11.6808,11.6808l0 0c0,6.42438 -5.25642,11.6808 -11.6808,11.6808z"/>
 </g>
 <g id="Layer_x0020_2">
  <metadata id="CorelCorpID_1Corel-Layer"/>
  <path class="fil1 str1" d="M132.933 122.891l117.492 0c6.42438,0 11.6808,5.25642 11.6808,11.6808l0 0c0,6.42438 -5.25642,11.6808 -11.6808,11.6808l-117.492 0c-6.42438,0 -11.6808,-5.25642 -11.6808,-11.6808l0 0c0,-6.42438 5.25642,-11.6808 11.6808,-11.6808z"/>
 </g>
 <g id="Layer_x0020_3">
  <metadata id="CorelCorpID_2Corel-Layer"/>
  <circle class="fil2 str2"  cx="259.353" cy="134.572" r="20.9144"/>
 </g>
</svg>
4

2 に答える 2

1

スライダーのパスではなく四角形を使用することをお勧めします。動的にする必要がある SVG を作成する場合は、通常、ビジュアル エディターを使用するよりも手動で作成することをお勧めします (特に、この場合のように単純な場合)。ビジュアル エディターは不要なコードを大量に作成するだけでなく、ほぼランダムな座標値を選択します。

これは非常に単純化された例です。パスの代わりに四角形を使用し、値の割り当てを容易にするためにフェーダーを座標 0 から 100 まで水平にスパンします。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="-10 -5 110 20">
  <defs>
    <style type="text/css">
      .fader           {stroke:#989B9F}
      .faderBackground,
      .faderKnob       {fill:url(#lightFaderGradient)}
      .faderForeground {fill:url(#darkFaderGradient)}
    </style>
    <linearGradient id="darkFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop offset="0" stop-color="#D7D9DC"/>
      <stop offset="1" stop-color="#42494C"/>
    </linearGradient>
    <linearGradient id="lightFaderGradient" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop offset="0" stop-color="white"/>
      <stop offset="1" stop-color="#D7D9DC"/>
    </linearGradient>
  </defs>
  <g id="myFader" class="fader">
    <rect class="faderBackground" width="100" height="10" rx="5"/>
    <rect class="faderForeground" width="50" height="10" rx="5"/>
    <circle class="faderKnob" cy="5" cx="50" r="7"/>
  </g>
</svg>

標準の DOM 操作を使用して JS コードの例をいくつか追加しましたが、もちろん、より便利なコードには d3.js を使用できます。

var faderX = parseFloat(prompt("Enter a value from 0 to 100"))

var fader = document.getElementById("myFader")
fader.getElementsByClassName("faderKnob")[0]
  .setAttribute("cx",faderX)
fader.getElementsByClassName("faderForeground")[0]
  .setAttribute("width",faderX)
于 2013-01-02T13:41:01.213 に答える