CSS Change D Property of <Path>

CSS change d property of path

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;
}

CSS change stroke property of path

I found a way, not through CSS though, I added the lineWidth:0 property to my chart inside the plotOptions and that did the trick.
Thank you all for the help!

  plotOptions: {
                                      area: {
                                          marker: {
                                            symbol: 'circle',
                                            lineWidth: 0,
                                              enabled: true,
                                              states: {
                                                  hover: {
                                                      enabled: true,
                                                      lineWidth: 0;
                                                  }
                                              }
                                          }
                                      },
                                  }

CSS changing the path of svg element

<svg>
  <path d="M 0 15
           L 35 0
           L 35 8
           L 70 8
           L 70 22
           L 35 22
           L 35 30"
        fill="#FFCC00" />
</svg>

CSS d path - attribute doesn't work in Safari, FireFox

d is an SVG “Geometry Property” defined in the SVG 2 specification at https://svgwg.org/svg2-draft/paths.html#TheDProperty. Google Chrome’s Blink layout engine is the only layout engine to support this property and its implementation doesn’t match the current specification definition.

Relevant Issue Tracker Pages:

Bugzilla@Mozilla Bug 1383650
Microsoft Edge Development Issue 11543103
Monorail Issue 652822

And, yes, you can achieve the same effect using the SVG animate element:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000">
    <title>Path Animation</title>
    <path fill="none" stroke="hsl(139, 99%, 56%)" stroke-width="20">
        <animate attributeName="d" values="
            M 425 225 L 475 275;
            M 425 225 L 475 275 L 575 175 L 575 175 L 575 175 L 575 175 L 575 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 675 275 L 675 275 L 675 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 775 175 L 775 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 875 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 925 225
        " keyTimes="0; 0.25; 0.5; 0.75; 0.9; 1" calcMode="spline" keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" dur="5s" fill="freeze"/>
    </path>
</svg>

0.42 0 1 1 is the set of cubic Bézier values for the ease-in animation-timing-function property keyword as defined in the CSS Timing Functions, Level 1 specification: https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in.

Change a svg path when another element is hover

Here's some simple code that shows how to do what you want. I've added comments to the code to describe what each step is doing.

// Find all the <a> elements in the list
var items = document.querySelectorAll("UL.location__list LI A");

// To each of them, add an event handler for when the mouse enters its box, and also when it leaves
items.forEach(item => {
  item.addEventListener("mouseover", itemMouseOver);
  item.addEventListener("mouseout", itemMouseOut);
});

function itemMouseOver(evt) {
  // Get the value of the data-area-id attribute for the <a> we are entering
  var areaId = evt.target.dataset['areaId'];
  // Use it to find the right circle, and add the class "active" to its class attaribute
  document.getElementById(areaId).classList.add("active");
}

function itemMouseOut(evt) {
  // Get the value of the data-area-id attribute for the <a> we are entering
  var areaId = evt.target.dataset['areaId'];
  // Use it to find the right circle, and remove the class "active" from its class attaribute
  document.getElementById(areaId).classList.remove("active");
}

/* The default style for a circle */
svg circle {
  fill: lightgreen;
}

/* the style for when the circle is hovered */
svg circle.active {
  fill: green;
}

<div class="location__wrapper">
  <div class="location__content">
    <ul class="location__list">
      <li class="location__list-item"><a data-area-id="1" class="location__list-link" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
      <li class="location__list-item"><a data-area-id="22" class="location__list-link" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
      <li class="location__list-item"><a data-area-id="3" class="location__list-link" href="https://www.biot.fr/">Biot</a></li>
      <li class="location__list-item"><a data-area-id="21" class="location__list-link" href="https://bouyon.fr/">Bouyon</a></li>
    </ul>
  </div>
</div>


<svg width="200" viewBox="0 0 100 100">
  <circle id="1" cx="25" cy="25" r="20"/>
  <circle id="22" cx="75" cy="25" r="20"/>
  <circle id="3" cx="25" cy="75" r="20"/>
  <circle id="21" cx="75" cy="75" r="20"/>
</svg>

CSS Change D Property of <Path>