1

滑块 SVG 图像

我正在尝试更改灰色区域的宽度并根据从 1 到 100 的某个值移动圆形图层。

我将 D3.js 与 SVG 图像一起使用。下面是 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

我建议使用 rects 而不是滑块的路径。如果您创建需要动态化的 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 回答
-3 
<html lang="en"><head>
    <meta charset="UTF-8">


    <style>



    </style>
</head>
<body>
    <svg
   width="100"
   height="100"
   id="slider"
   version="1.1"
   onload="init(evt)"
   onmouseup="released()"
       onmousemove="drag(evt)">
    <defs xmlns="http://www.w3.org/2000/svg">
        <!-- Symbol for Slider -->
        <symbol id="sliderSymbol" overflow="visible">
            <line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="9" pointer-events="none"/>
        </symbol>
    </defs>

 <script>
 <![CDATA[

      var isGripped=false

      var grabY   // mousedown coordinate
      var grabX
      var monitor // text reading 0-100
      var y       // the slider's dynamic coordinate

      var T_PI=2*Math.PI;

      function init(evt){

         var svgns = "http://www.w3.org/2000/svg";
         SVGDocument = evt.target.ownerDocument;

         monitor= SVGDocument.getElementById('monitor');
         handle=SVGDocument.getElementById('handle');

     // set dimensions according to the sliderFrame node below

         var sliderFrame= SVGDocument.getElementById('sliderFrame')

     //  y0 is the center of the slider, s is the range about the center

         s=0.5*parseFloat(sliderFrame.getAttribute('width'));
         y0=parseFloat(sliderFrame.getAttribute('y'))+s-0.5*parseFloat(handle.getAttribute('height'));
         y=y0

         handle.setAttribute("x",y0);
     }



      function grip(evt) {  

            isGripped=true;
            grabX=evt.clientX-y;
      }


      function drag(evt){

            if (!isGripped) return;
            X=(evt.clientX);

       // observe bounding box constraint

           y=Math.min(Math.max(X-grabX,y0-s),y0+s);       

           handle.setAttribute("x",y);
           monitor.textContent=Math.round(50*(1-(y-y0)/s));
      }


      function released(){
         isGripped=false;
      }


 ]]></script>





          <path id="sliderpathL" d="M 30 90 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" onclick="drag(evt)">
          </path>





               <line stroke-linecap="square" stroke-width="15" stroke="cyan" y2="90" x2="325" y1="90" x1="90"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_1" y2="102" x2="89.5" y1="96" x1="89.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_2" y2="102" x2="145.5" y1="96" x1="145.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_3" y2="105" x2="209.5" y1="96" x1="209.5"/>
               <line fill="none" stroke-width="2" stroke="#000000" id="svg_4" y2="101" x2="267.5" y1="96" x1="267.5"/>
                  <line fill="none" stroke-width="2" stroke="#000000" id="svg_4" y2="101" x2="317.5" y1="96" x1="317.5"/>

          <rect   id="sliderFrame" 
          x="85" 
          y="90" 
          width="245" 
          height="4" 
          stroke="dimgray" 
          stroke-width="0" 
        onmousemove="drag(evt)"  />

         <rect
           onmousedown="grip(evt)"
           height="20"
           width="10"
           x="85"
           y="80"
           id="handle"
           style="fill:#0000ff" />  
      <path id="sliderpathR" d="M 383 90 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red"></path>

        <g id="textbox">
       <rect x="390" y="70" width="100" height="40" rx=3 ry=3 style="stroke:#006600; fill: white"/>
       <text id='monitor' x="400" y="88">50</text>
        </g>




    </svg>



</body>
</html>
于 2015-05-11T09:51:25.467 回答