29

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':

Here is the generated code (I can't change it directly):

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<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;">
</path>
</svg>
</div>

Here is the CSS to override the d value, I get

Unknown property name

in the CSS inspector !!! :

enter image description here

#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;
}
user2997418
  • 648
  • 1
  • 8
  • 22
  • You can't do this with CSS. CSS was not designed to do this. You will have to use JavaScript, and then the process becomes trivial. If you need to use CSS selectors for this, try jQuery. –  Feb 14 '17 at 13:25
  • Are you sure any UI supports d as a CSS property? This Chrome bug for it is still in progress: https://bugs.chromium.org/p/chromium/issues/detail?id=652822. I think you're beyond even the bleeding edge here. – Robert Longson Feb 14 '17 at 13:30
  • @MuhammadUsman any way to do it in JS or JQuery ? – user2997418 Feb 14 '17 at 13:30
  • This unfortunatly doesn't work in FF – user2997418 Apr 04 '17 at 12:53

2 Answers2

56

You're almost on the right track here, you just need to set the correct value for the property. It's missing path('..'):

#map_outer svg path {
    d: path('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;
}
brendonofficial
  • 850
  • 8
  • 10
  • 3
    I did not knew that trick, nice one. I was going for the `` way. – user7393973 Feb 14 '17 at 13:40
  • 9
    That will break once Chrome implement the correct syntax for d https://bugs.chromium.org/p/chromium/issues/detail?id=652822 – Robert Longson Feb 14 '17 at 13:49
  • 4
    And it currently works just in Chrome-based browsers, nowhere else. (But cool remark anyway, @brendonofficial!) – myf Feb 14 '17 at 14:05
  • Did anybody have an issue with this not working on safari? – stemon Aug 10 '21 at 01:47
  • 1
    Firefox will support path data in styles from version 93. The spec has been changed, so this should be future proof. – Waruyama Sep 02 '21 at 07:25
3

Add a id to your <path d="..."></path> and then the JavaScript code with the new path:

<svg>
  <path d="..." id="myPath></path>
</svg>
<script>
  document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
</script>

Here's an example:

<html>
  <body>
    <svg>
      <path d="M 0 0 L 50 0 L 50 50" id="myPath" />
    </svg>
    <script>
      document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
    </script>
  </body>
</html>
user7393973
  • 2,270
  • 1
  • 20
  • 58