Note that there are some explanatory texts on larger screens.

plurals
  1. POChange height and width of the path tag in SVG Image
    primarykey
    data
    text
    <p><img src="https://i.stack.imgur.com/YFDsD.png" alt="Slider SVG Image"></p> <p>I am trying to change the width of the grey area and move the circle layer based on some value from 1 to 100. </p> <p>I am using D3.js with SVG images. Below is the code of the svg image but I am not able to change width since the path tag doesn't have any direct attribute to do that. </p> <pre><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;!-- Creator: CorelDRAW --&gt; &lt;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"&gt; &lt;defs&gt; &lt;style type="text/css"&gt; &lt;![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)} ]]&gt; &lt;/style&gt; &lt;linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="301.84" y1="146.253" x2="301.84" y2="122.891"&gt; &lt;stop offset="0" style="stop-color:#D7D9DC"/&gt; &lt;stop offset="1" style="stop-color:white"/&gt; &lt;/linearGradient&gt; &lt;linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="191.679" y1="122.891" x2="191.679" y2="146.253"&gt; &lt;stop offset="0" style="stop-color:#D7D9DC"/&gt; &lt;stop offset="1" style="stop-color:#42494C"/&gt; &lt;/linearGradient&gt; &lt;linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="259.354" y1="155.487" x2="259.354" y2="113.657"&gt; &lt;stop offset="0" style="stop-color:#D7D9DC"/&gt; &lt;stop offset="1" style="stop-color:white"/&gt; &lt;/linearGradient&gt; &lt;/defs&gt; &lt;g id="Layer_x0020_1"&gt; &lt;metadata id="CorelCorpID_0Corel-Layer"/&gt; &lt;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"/&gt; &lt;/g&gt; &lt;g id="Layer_x0020_2"&gt; &lt;metadata id="CorelCorpID_1Corel-Layer"/&gt; &lt;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"/&gt; &lt;/g&gt; &lt;g id="Layer_x0020_3"&gt; &lt;metadata id="CorelCorpID_2Corel-Layer"/&gt; &lt;circle class="fil2 str2" cx="259.353" cy="134.572" r="20.9144"/&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload