What is the best way to incorporate masks in SVG for Safari compatibility?

My SVG works perfectly fine on desktop and android, but it doesn't show up properly on Safari. The issue seems to be with the mask because when I remove it, the SVG displays as a big rectangle instead of the intended blobs. I have defined a viewbox, height, and width for the SVG. I'm not sure what Safari dislikes about masks, but I really need it to work on that platform.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg
          viewBox="0 0 1920 1440"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:Xlink="http://www.w3.org/1999/xlink"
          width="100%"
          id="blobSvg"
        >          
          <defs>
            <filter id="goo">
              <feGaussianBlur
                in="SourceGraphic"
                result="blur"
                stdDeviation="10"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                result="goo"
              />
              <feBlend in2="goo" in="SourceGraphic" result="mix" />
            </filter>
            <linearGradient
              gradientTransform="rotate(150, 0.5, 0.5)"
              x1="50%"
              y1="0%"
              x2="50%"
              y2="100%"
              id="gradient"
            >
              <stop
                stop-color="hsl(315, 100%, 72%)"
                stop-opacity="1"
                offset="0%"
              ></stop>
              <stop
                stop-color="hsl(227, 100%, 50%)"
                stop-opacity="1"
                offset="100%"
              ></stop>
            </linearGradient>
          </defs>

          <mask id="maska">
            <path fill="white" transform="translate(2000 800) scale(1.5 1.7)">
              <animate
                attributeName="d"
                dur="15000ms"
                repeatCount="indefinite"
                values="
                M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z;
              M435,328.5Q407,407,328.5,407.5Q250,408,190,389Q130,370,72,310Q14,250,71,189Q128,128,189,94Q250,60,338,67Q426,74,444.5,162Q463,250,435,328.5Z;
              M407,327.5Q405,405,327.5,403Q250,401,190.5,385Q131,369,101.5,309.5Q72,250,87.5,176.5Q103,103,176.5,52Q250,1,314,61.5Q378,122,393.5,186Q409,250,407,327.5Z;
              M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z;
                  "
              ></animate>
            </path>

            <g transform="translate(1300 200)"  >
              <path class="blobAnimate1" fill="white">
                <animate
                  attributeName="d"
                  dur="10000ms"
                  repeatCount="indefinite"
                  values="
                  M420.84958,302.55114Q355.10228,355.10228,302.55114,420.44946Q250,485.79664,168.97563,448.92269Q87.95126,412.04874,76.04994,331.02437Q64.14862,250,86.32521,179.2509Q108.5018,108.5018,179.2509,52.92809Q250,-2.64562,313.02557,60.65162Q376.05114,123.94886,431.32401,186.97443Q486.59688,250,420.84958,302.55114Z;
                  M415.04469,326.54163Q403.08327,403.08327,326.54163,440.62559Q250,478.16791,183.60267,430.48128Q117.20535,382.79465,91.12181,316.39733Q65.03827,250,75.3604,167.84126Q85.68253,85.68253,167.84126,55.7063Q250...
cssreactjssvg

Answer №1

An issue has been pinpointed in the animate values string due to an extraneous semicolon (;) lingering at the end of the path definition.

While Safari appears affected, other browsers do not replicate this behavior.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 1920 1440" xmlns="http://www.w3.org/2000/svg" xmlns:Xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
          <defs>
            <filter id="goo">
              <feGaussianBlur
                in="SourceGraphic"
                result="blur"
                stdDeviation="10"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                result="goo"
              />
               ...
</div>
</div>
</p>
    </div></answer1>
<exanswer1><div class="answer accepted" i="78135106" l="4.0" c="1710046264" a="QSBIYXdvcnRo" ai="10867454">
<p>A misplaced semicolon (;) at the end of the path definition within the animate values string is causing an unexpected behavior.</p>
<p>Safari is experiencing the issue, while other browsers are not displaying the same issue.</p>
<p><div>
<div>
<pre><code><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

...
(More content here)
...

          </defs>
        </svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align this content in a specific area?

How can I center the content in each section of my webpage? Here is an image for reference: https://i.stack.imgur.com/PHEXb.png I want Section 1 and Section 2 to be 100vh with the content centered on the page. .content { height: 100vh; } <!do ...

htmlcsstwitter-bootstrapbootstrap-5

Simple dilemma: extracting values from a form component and transferring them to the App

After diving into the formik documentation and numerous tutorials, I'm still struggling to grasp the fundamental concept of formik and forms. My project involves generating random gamer tags for users to rate and organize as a way for me to learn Rea ...

reactjsformik

Tips for integrating Material UI with useRef

There seems to be an issue with the code, but I haven't been able to pinpoint exactly what it is. My question is: How do you properly use useRef with Material UI? I am attempting to create a login page. The code was functioning fine with the original ...

javascriptreactjsmaterial-ui

Setting the state in ComponentDidMount is a crucial aspect of working with

I encountered an unusual issue with a react app, Initially used in a Django project, I now aim to repurpose it for a Laravel project but am facing functionality issues... Below is the code snippet of my component: import React from "react" import {LeftC ...

reactjsstatemount

The type '{}' cannot be assigned to the type 'IntrinsicAttributes'

Recently delving into TypeScript, I am eager to integrate it with React. I have a functional component that needs to be exported in this manner: import React from 'react'; import HOC from './HOC'; interface PropsType { someProp: boo ...

reactjstypescript

Issues with React router arise once the app has been built

I am new to utilizing react and react-router in my project. I have built the application using create-react-app and now I am facing an issue with routing between two main pages. After trying different approaches, I managed to get it working during develop ...

javascriptreactjsnpmbuildreact-router

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

javascripthtmlcssangularbootstrap-5

What is the best way to pass the username and token data from a child component to its parent component

Hey, I'm currently working on a login app in React where the login component is a child of the app. My goal is to send back the username and token to the parent component once a user is logged in, so that I can then pass this information to other chil ...

reactjstypescript

I am unable to generate multiple users within MongoDB

Hey guys, I'm in the process of setting up an authentication system on my MERN web application using Passport. Initially, everything seems to be working smoothly - I can register a user without any issues. However, when I attempt to re-register with ...

node.jsreactjsmongodbpassport.js

What are the benefits of installing npm for a React Native application?

Currently, I am diving into the world of react native app development. One question that has been lingering in my mind is "Why is it necessary to install npm for a react native app?" My initial assumption was that the app would be directly available for ...

reactjsnative

Adjust the color of the IconButton

I am trying to customize the color of an IconButton by setting it to red <IconButton variant='contained'> <StarBorderRoundedIcon color='red' /> </IconButton> However, when I try this, the red color ...

htmlreactjssvgmaterial-uiicons

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2

Calculation of Fields in React Hook Form

My form includes the following fields: 1-Charge Amount Default Value =120 2-Charge Count Default Value=1 3-Total Amount =Charge Amount * Charge Count 4-Paid Amount 5-Balance =Total Amount - Paid Amount To view my code, visit: https://codesandbox ...

reactjsreact-hook-form

Beautifully collapsing inline-blocks using only CSS

My header features three inline-blocks within a container that is text-aligned center. The left block floats to the left, and the right block floats to the right, creating a visually appealing effect where the middle block's text remains centered on s ...

css

I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side o ...

csscss-floathtml

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

What is the best way to receive a notification when a user chooses any option in a Material UI Autocomplete React component?

My dilemma involves using an autocomplete feature that doesn't behave as expected. I am looking to detect when an option is selected, regardless of whether it's the same as the last selection. The onChange event I'm using only triggers if th ...

javascriptreactjsmaterial-ui

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...

javascripthtmlcssangular

Is it possible for this solution to be compatible with IE7 and IE6?

Is there a way to enhance this solution for compatibility with IE6 and IE7? http://jsfiddle.net/kirkstrobeck/sDh7s/1/ Referenced from this discussion After some research, I have come up with a practical solution. I've converted it into a new func ...

javascriptjquerycssinternet-explorer-7internet-explorer-6

Verify the presence of the Metamask app on a mobile device by utilizing react-native

Currently, I am in the process of developing an app with react-native. Within my project, I am utilizing react native's Linking API to facilitate opening a website link in the Metamask app installed on the mobile phone. When the Metamask app is presen ...

androidiosreactjsreact-native