Changing the fill color of an SVG pattern remains unchanged

I have been working with Vue.js to create SVGs with shape patterns as background. The patterns themselves are functioning correctly, but I am encountering an issue when attempting to dynamically change the color of the pattern filling by passing props. Despite being confident in the correctness of the prop being passed, the color does not update as expected.

<pattern
    id="TrianglePattern"
    patternUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="1500"
    height="1500"
    viewBox="0 0 10 10">
  <path
      d="M 0 0 L 7 0 L 3.5 7 z"
      :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
      stroke="blue" />
</pattern>
javascriptvue.jssvgsvg-pattern

Answer №1

Everything is working properly:

new Vue({
    el: '#app',
    data: {
    groupDetails: {
        color: 'red'
        }
    }
});
label, input {
    cursor: pointer;
}
<script src="//unpkg.com/vue@2"></script>

<main id="app">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
        <pattern id="TrianglePattern"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0" width="150" height="150"
                 viewBox="0 0 10 10">
            <path d="M 0 0 L 7 0 L 3.5 7 z"
                  :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
                  stroke="blue" />
        </pattern>

        <path d="M100,10 a90,40 0 1,0 .1,0 z" fill="url(#TrianglePattern)" stroke="black" />
    </svg>

    <div>
        <label><input type="radio" v-model="groupDetails.color" value="red"/>   Red</label>
        <label><input type="radio" v-model="groupDetails.color" value="green"/> Green</label>
        <label><input type="radio" v-model="groupDetails.color" value="blue"/>  Blue</label>
        <label><input type="radio" v-model="groupDetails.color" value="yellow"/> Yellow</label>
    </div>
</main>

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

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

javascriptjqueryajaxhtml

Is there a way to transfer a variable between elements using VueJs?

Is it possible to transfer variables between elements in VueJs? Vue Image ...

vue.js

"Discrepancy in results between JSON stringify and JavaScript object conversion

I need to save this object in a database, but first I have to send it to the backend. Recorder {config: Object, recording: false, callbacks: Object, context: AudioContext, node: ScriptProcessorNode…} However, after using JSON.stringify(recorder) The r ...

javascriptjson

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js

Utilize passed props in components as well as Redux state information

Typically, you can access props sent by a parent to a child component on the child component itself. However, when using Redux in child components, the props sent by the parent are lost due to the use of the 'connect' method which maps the Redux ...

javascriptreactjsreduxstate

A guide on using FileReader to efficiently read multiple images

I need to be able to select multiple images from one input and read them using File Reader. If I leave it as is, it only gives me one picture. const [image , setImage] = useState(''); const [imageSelected , setImageSelected] = useState(nul ...

javascriptreactjs

I need help with customizing the progress bar in HTML and CSS

How can I create a progress bar like the one shown below: .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height ...

javascripthtmlcss

Pass RGBA color code from JavaScript to Laravel controller

I have an exciting project where users need to select a color value in hex format. Once I retrieve this value in JavaScript, I convert it to Rgba format. Now, my challenge is figuring out how to send this converted value to the controller for database stor ...

javascriptphpajaxlaravel

Tips for sending JSON data from JavaScript to PHP servers

After encoding an array into JSON using JavaScript, I set up my ajaxrequest object like this: var data = JSON.stringify(cVal); function ajaxRequest(url, method, data, asynch, responseHandler){ var request = new XMLHttpRequest(); request.open(meth ...

javascriptphpjson

Using Angular 7 shared service to allow sibling components to exchange data between each other

In my Angular 7 application, I have two sibling components - a configurator component and a custom stepper component. The configurator component is responsible for fetching data from the API and performing calculations on it. I would like to display the ca ...

javascriptangulartypescriptangular-materialangular-services

Moving SVG Module

My goal is to create a custom component that can dynamically load and display the content of an SVG file in its template. So far, I have attempted the following approach: icon.component.ts ... @Component({ selector: 'app-icon', templa ...

angulartypescriptsvgionic2

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

I recently started learning PHP OOP and am currently using the Code Igniter framework. I encountered some difficulties in sending data to the controller using AJAX, so I attempted a simple test to check if AJAX was functioning properly, but unfortunately, ...

javascriptphpjqueryajaxcodeigniter

Tips for resolving the error message "cannot read property of undefined"

I've been working on coding a Discord bot and I keep encountering an error when trying to check if "mrole" has the property "app". It's not functioning as expected and I'm puzzled by why this is happening. My intention is to retrieve the te ...

javascriptnode.jsdiscord.js

Should I fork and customize npm package: Source or Distribution? How to handle the distribution files?

Currently, I am in the process of developing a VueJS web application. Within this project, there is a module that utilizes a wrapper for a JavaScript library obtained through npm and designed to seamlessly integrate with VueJS. However, it doesn't com ...

javascriptnpm

How can I retrieve the word that comes after a specific word in discord.js

Currently, I'm attempting to create a bot similar to Dad bot, but I'm struggling with implementing the "Hi __ I'm, Dad" feature. Here's the code snippet that I've put together so far: var imWords = ["i'm", "I&a ...

javascriptarraysstringdiscorddiscord.js

Angular's implementation of a web socket connection

I am facing an issue with my Angular project where the web socket connection only opens upon page reload, and not when initially accessed. My goal is to have the socket start as soon as a user logs in, and close when they log out. Here is the custom socke ...

javascriptangulartypescriptwebsocket

"Prop serves as a blank slate within the child component of a React application

My current challenge involves integrating a search bar into a parent component. Despite successful logic in the console, I am experiencing a reduction in search results with each character entered into the search field. The issue arises when attempting to ...

javascriptreactjs

Hide the dropdown menu when the user clicks anywhere else on the screen

I have a scenario with 2 dropdown buttons. When I click outside the dropdown or on it, it closes. However, if I click on the other dropdown button, it does not close and the other one opens. I want them to close when I click on the other button or anywhere ...

javascriptjquery

Error: The function referenced is not defined when the page loads

Trying to incorporate two different script tags in a single HTML page has been quite a task for me. The first script tag contains the location of a JS file that I need to use for a specific function, while the second script tag is where I have written anot ...

javascriptjquery

Creating reusable functions in VueJS that can be accessed globally by all child components

Looking for assistance in setting up a universal function that can be accessed across all my Vue files. For example, when using this code snippet in a Vue file: @click="ModalShow.show('my-create')" I have defined the following constan ...

javascripttypescriptvue.jsvuejs3