title: zooming out of SVG using CSS
body: <p>I have this SVG of a paperplane, which I want to have inside of a circle.
  However, when I do the following the SVG is cropped at the edges. The nature of SVG is being scaleable, I have tried fiddling with the properties of the SVG however the problem remains. What should I do to keep this SVG</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 18.7 14.3" style="enable-background:new 0 0 18.7 14.3;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
      .st0{fill:#000;}
  &lt;/style&gt;
  &lt;path class="st0" d="M18.7,0L0.3,4.1l3,3.6L0,9.4l0.5,4.9l5.6-4.1l2.3,1.5L18.7,0z M1.3,4.4L16,1.2L3.8,7.4L1.3,4.4z M10.3,4.7
      l-9.3,5.5l-0.2,1.7L0.6,9.7L10.3,4.7z M1.2,13.2l0.4-2.7l2.6-1.6l1.5,1L1.2,13.2z M4.7,8.6l12-7.1l-8.3,9.5L4.7,8.6z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This is my HTML and CSS
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      .choice {
          background-color: #E0D6AF;
          border-radius: 50%;
          height: 200px;
          width: 200px; 
          margin: 10px auto;
          transition:  transform 0.2s;
          transform: scale(1);
          z-index: 10;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;img id="paper" class="choice" value="paper" src="http://www.jerrylow.com/demo/rps/paper.svg" alt="a piece of paper"&gt; &lt;/img&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Full CSS file</p>
  
  <pre><code>  .container {
    display: inline-grid;
    padding-top:30px;
    grid-gap: 2px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  #submit {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
    grid-column: 2;
    grid-row: 2;
    background-color:#E0D6AF;
  }
  #submit:hover { 
    transform: scale(1.3);
  }
  .choice {
    background-color: #E0D6AF;
    border-radius: 50%;
    height: 200px;
    width: 200px; 
    margin: 10px auto;
    transition:  transform 0.2s;
    transform: scale(1);
    z-index: 10;
  }
        .choice &gt; img:hover {
          transform: scale(1.1);
        }
        #rock{
        grid-column: 1;
        grid-row:1;
        }
        #paper{
          grid-column: 1;
          grid-row:2;
        }
        #scissor{
          grid-column: 1;
          grid-row:3;
        }
  
        #humanScore &gt; p {
          padding-top: 80px;
          text-align: center !important;
        }
        #humanScore {
          grid-column: 2;
          grid-row: 3;  
        }
        #computerScore &gt; p {
          padding-top: 80px;
          text-align: center !important;
        }
        #computerScore {
          grid-column: 2;
          grid-row: 1; 
        }
  
        #result {
          margin: auto;
          width: 150px;
          height: 150px;
          border-radius: 50%;
          grid-column: 3;
          grid-row: 2;
        } 
  
        @keyframes pulse{
          0%{
            transform: scale(0);
          }
          100%{
            transform: scale(1);
          }
        }
  
        .resultWin{
          background-color:lightgreen;
          transition:  transform 0.2s;
          transform: scale(1.3);
          animation-name: pulse;
          animation-duration: 1s;
          animation-iteration-count: 1;
          animation-fill-mode: both;
  
        }  
        .resultLoss{
          background-color: crimson;
          transition:  transform 0.2s;
          transform: scale(1.3);
          animation-name: pulse;
          animation-duration: 1s;
          animation-iteration-count: 1;
          animation-fill-mode: both;
  
        } 
        .resultTie{
          background-color:goldenrod;
          transition:  transform 0.2s;
          transform: scale(1.3);
          animation-name: pulse;
          animation-duration: 1s;
          animation-iteration-count: 1;
          animation-fill-mode: both;
        } 
        .chosen { filter: brightness(70%) }
  </code></pre>
  
  <p>Full react file - needs a ton of refactoring so difficult to read.</p>
  
  <pre><code>import React from 'react';
  import './Game.css'
  
  class Game extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        picked: '',
        score: {
          player: 0,
          computer: 0
        },
        previousPicks: {
          rock: 0,
          scissor: 0,
          paper: 0
        },
        result: { result: "", player: "", computer: "" }
      };
    }
  
    unmarkImage = () =&gt; {
      if (this.state.picked !== "") {
        document.querySelector(`#${this.state.picked}`).classList.remove("chosen")
      }
    }
  
    onClickHandler = (event) =&gt; {
      this.unmarkImage();
      document.querySelector(`#${event.target.attributes.value.value}`).classList.add("chosen");
      this.setState({ picked: event.target.attributes.value.value });
    }
  
    onSubmit = () =&gt; {
      if (this.state.picked === "") {
        alert("pick your weapon, before fighting")
        return
      }
      const self = this;
      fetch(`/api/play/${this.state.picked}`)
        .then(function (res) {
          res.text().then((function (text) {
            self.setState({ result: JSON.parse('{' + text.replace(/(\w+):(\w+)/g, `"$1":"$2"`) + '}') })
            self.updateScore(self.state.result.result);
            self.updateResult();
            self.unmarkImage();
            self.updateComputerChoice();
            self.updatePreviousPicks(self.state.picked)
            self.setState({ picked: "" })
          }))
        })
    }
  
    updateScore = (result) =&gt; {
      let scoreClone = { ...this.state.score }
      if (result === "win") {
        scoreClone.player++
        this.setState({
          score: scoreClone
        })
      } else if (result === "loss") {
        scoreClone.computer++
        this.setState({
          score: scoreClone
        })
      }
    }
    updatePreviousPicks = (pick) =&gt; {
      let previousPicksClone = { ...this.state.previousPicks }
      if (pick === "rock") {
        previousPicksClone.rock++;
        this.setState({
          previousPicks: previousPicksClone
        })
      } else if (pick === "scissor") {
        previousPicksClone.scissor++;
        this.setState({
          previousPicks: previousPicksClone
        })
      } else {
        previousPicksClone.paper++;
        this.setState({
          previousPicks: previousPicksClone
        })
      }
    }
  
    onReset = () =&gt; { //looks clumsy, but good performance
      let computerDiv = document.querySelector("#computer")
      while (computerDiv.firstChild) {
        computerDiv.removeChild(computerDiv.firstChild);
      }
    }
  
    updateResult = () =&gt; {
      let result = document.querySelector("#result")
      if (this.state.result.result === "win") {
        result.classList.add("resultWin");
      }
      else if (this.state.result.result === "loss") {
        result.classList.add("resultLoss");
      } else {
        result.classList.add("resultTie");
      }
    }
  
    updateComputerChoice = () =&gt; {
      let computerChoice = this.state.result.computer;
      let result = document.querySelector("#result");
      while (result.firstChild) {
        result.removeChild(result.firstChild);
      }
      let answer = document.createElement("img");
      let img;
      if (computerChoice === "rock") {
        img = document.getElementById("rock").src;
      } else if (computerChoice === "scissor") {
        img = document.getElementById("scissor").src;
      } else {
        img = document.getElementById("paper").src;
      }
      answer.src = img;
      result.appendChild(answer);
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;img id="rock" className="choice" value="rock" src="resources/rock.svg" alt="a rock" onClick={this.onClickHandler}&gt;&lt;/img&gt;
          &lt;img id="paper" className="choice" value="paper" src="resources/paper.svg" alt="a piece of paper" onClick={this.onClickHandler}&gt;&lt;/img&gt;
          &lt;img id="scissor" className="choice" value="scissor" src="resources/scissor.svg" alt="a scissor" onClick={this.onClickHandler}&gt;&lt;/img&gt;
          &lt;button id="submit" className="waves-effect waves-light btn" onClick={this.onSubmit}&gt;Fight the AI!&lt;/button&gt;
          &lt;div id="humanScore"&gt;
            &lt;p&gt;You: {this.state.score.player}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="computerScore"&gt;
            &lt;p&gt;Computer: {this.state.score.computer}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="result" className=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Game
  </code></pre>