CSS "D" Path - Attribute Doesn't Work in Safari, Firefox

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.

CSS 'd' path attribute doesn't work in Firefox

var pathD = "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";

$("#map_outer svg path").attr("d", pathD);

#map_outer svg path{

    fill: rgb(255, 204, 0) !important;

    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;

    stroke-width: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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);-moz-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);-moz-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>

SVG path : pattern fill not working in firefox and Safari

There is no height attribute on the image. SVG 2 allows width/height to be omitted but only Blink has implemented this part of SVG 2 so far.

You also have a redundant fill on the rect (as you're applying a pattern fill as a style)

<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">

      <defs>

        <pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">

        <image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>

     </pattern>

      </defs>

     

     <path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0  0,0  0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>

  

 </svg>

CSS/SVG clip path not working in Firefox

Currently a URL that starts with # points into the same file. I.e. if you write #xxx in a CSS file you'd need to have an element with an id of xxx in that CSS file itself.

The relevant specifications have changed recently and I think Firefox will change at some point to assume that #xxx would refer to a resource in the parent document.

In the meantime you can either put the CSS in the file it references or prepend the file path to the #

SVG Filter issue with Safari

There is no such input as sourceAlpha. The correct name is SourceAlpha.

I can't currently test on Safari, but it fixes the problem in Firefox.

path {

  fill: none;

  stroke-linecap: round;

  stroke-miterlimit: 10;

  stroke-width: 8;

  stroke: rgba(38, 38, 38, .03);

  stroke: rgb(0, 131, 202);

}

path:nth-of-type(2n+1) {

  stroke: rgba(38, 38, 38, .03);

}

path:nth-of-type(2n) {

  stroke: rgb(0, 131, 202);

}

<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">

    <defs>

        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">

            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>

            <feComponentTransfer result="blur">

                <feFuncA type="linear" slope=".21"/>

            </feComponentTransfer>

             <feMerge>

                <feMergeNode in="blur"/>

                <feMergeNode in="SourceGraphic"/>

            </feMerge>

        </filter>

    </defs>

    <path d="M69.45584,18.54416a36,36,0,1,1-50.91168,0"/>

    <path d="M18.54416,18.54416a36,36,0,0,1,50.91168,0" filter="url(#glow)"/>

</svg>

---

Related Topics