title: CSS change d property of <path>
body: <p>I have a generated svg path code, I want to override it with CSS file to change the svg shape.
  I could override all the properties except 'd':</p>
  
  <p>Here is the generated code (I can't change it directly):</p>
  
  <pre><code>&lt;div id="map_outer" style="position: absolute; left: 3px; z-index: 1;"&gt;
  &lt;svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"&gt;&lt;desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"&gt;Created with Raphaël 2.1.0&lt;/desc&gt;
  &lt;defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"&gt;
  &lt;/defs&gt;
  &lt;path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;"&gt;
  &lt;/path&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS to override the d value, I get </p>
  
  <blockquote>
    <p>Unknown property name</p>
  </blockquote>
  
  <p>in the CSS inspector !!! :</p>
  
  <p><a href="https://i.stack.imgur.com/FzgFH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FzgFH.png" alt="enter image description here"></a></p>
  
  <pre><code>#map_outer svg path{
      fill: rgb(255, 204, 0) !important;
      d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
      stroke-width: 0;
  }
  </code></pre>