更改路徑標籤的高度和寬度在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>

來源

2013-01-02 Prateek Jain

我建議使用rects而不是滑塊的路徑。如果您創建了需要動態變化的SVG，那麼通過手動創建SVG通常是一個更好的主意，而不是使用可視化編輯器（尤其是在這種情況下非常簡單）。可視化編輯器不僅創建了大量不需要的代碼，還選擇了非常隨機的座標值。

Here's a significantly simplified example，使用rects代替路徑，從座標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更多conventient代碼：

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-02 13:41:01

這正是我一直在尋找。非常感謝！！ –

順便說一下，旋鈕和推子背景的漸變效果是完全相同的，所以還有更多的簡化空間。 –

-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-11 09:51:25

更改路徑標籤的高度和寬度在SVG圖片

回答

相關問題