title: Convert the height value in percents to the width value in percents in svg using d3.js
body: <p>How could I convert the height value in percents to the width value in percents in <code>svg</code> using <code>d3.js</code>?</p>
  
  <p>I need this in order to get a square shaped <code>svg</code> element on the tip of a rectangle, such a square that its side`s length is equal to the rectangle`s height. And this I need because I want to draw a pencil icon in that <code>svg</code> just like that:</p>
  
  <p><a href="https://i.stack.imgur.com/ZWXJT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWXJT.png" alt="enter image description here"></a></p>
  
  <p>Having a separate <code>svg</code> element for drawing the pencil will allow me to make the pencil responsive by manipulationg the <code>viewBox</code> attribute values (while the pencil icon will be drawn using the <code>path</code> element).</p>
  
  <p>So, the problem I am facing is that the percents of the height represent a different measurement in the width. For example, <code>10%</code> in height have a different meaning from <code>10%</code> in width (in other words if width is 100 and height is 10, then <code>10%</code> in height is one and <code>10%</code> in width is 10).</p>
  
  <p><a href="https://jsfiddle.net/76uedo40/195/" rel="nofollow noreferrer">Here</a> is a fiddle.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>debugger;
  const svg = d3.select("#drawRegion")
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%");
  svg.append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "yellow");
    
  const innerRectX = 10;
  const innerRectY = 10;
  const innerRectWidth = 80;
  const innerRectHeight = 30;
  const innerRect = svg
  .append("rect");
  innerRect
  .attr("x", innerRectX + "%")
  .attr("y", innerRectY + "%")
  .attr("width", innerRectWidth + "%")
  .attr("height", innerRectHeight + "%")
  .attr("fill", "pink");
  
  const squareSideLength = innerRectHeight;
  const squareX = innerRectX + innerRectWidth - squareSideLength;
  const squareY = innerRectY;
  const mustBecomeASquare = svg
  .append("svg");
  mustBecomeASquare
  .attr("x", squareX + "%")
  .attr("y", squareY + "%")
  .attr("width", squareSideLength + "%")
  .attr("height", squareSideLength + "%")
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "green");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="drawRegion"&gt;
  
  &lt;/div&gt;
  &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see the green <code>rect</code> is not a square.</p>