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

AJAX cached outcomes

Trying to educate myself on AJAX using w3schools.com, but struggling with a particular example: xhttp.open("GET", "demo_get.asp", true); xhttp.send(); In the above example, there might be a cached result. To prevent this, you can include a unique ID in t ...

javascriptphpajaxcaching

Accessing the "this" object in Vue.js components

When executing console.log(this) in the doSomething method, it returns "null". I was expecting console.log(this.currentPage) to display "main", but unfortunately, the "this" object is null.. :( Is there a way to access the value of "main" for currentPage ...

javascriptvue.js

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

javascriptnode.jstypescriptecmascript-6serverless-framework

Guide on effectively sending a secondary parameter in an ajax request

Struggling to implement a year/make/model multi-select feature, I have managed to get the scripts working. However, what appears to be missing is the ability to pass both a year and make variable together in order to fetch the final model results. Below a ...

javascriptphpjqueryajax

Comparing defaultProps with the logical OR operator

Being relatively new to react, I’ve adopted a method of defining default values which looks like this: class TextInput extends Component { render() { return ( <input type="text" name={ this.pr ...

javascriptreactjs

Looking for a demonstration using dust.js or handlebars.js in a two-page format with express3.x and node?

Currently, I am in the process of selecting a templating engine to use. While I have come across numerous single-page examples utilizing template engines, I am specifically searching for a practical example that demonstrates handling two distinct pages whi ...

javascriptnode.jsexpresshandlebars.jsdust.js

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

As I embark on my journey to learn the fundamentals of API development, I am following a tutorial on YouTube by Ania Kubow. The tutorial utilizes three JavaScript libraries: ExpressJS, Cheerio, and Axios. While I have been able to grasp the concepts being ...

javascriptnode.jsexpressaxioscheerio

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

javascriptjqueryhtmlangularjs

Problem with MongoDB - increasing number of connections

I have encountered an issue with my current approach to connecting to MongoDB. The method I am using is outlined below: import { Db, MongoClient } from "mongodb"; let cachedConnection: { client: MongoClient; db: Db } | null = null; export asyn ...

javascriptnode.jstypescriptmongodb

What is the best way to determine if any of the objects in an array contain a "completed" property with a value of false using JavaScript and React?

Is there a way to determine if at least one item in an array of objects has a completed property with a value of false using JavaScript and React? Here is an example array of objects: const items = [ { id: "32", jobs: [ ...

javascriptreactjs

I'm experiencing difficulties in installing dependencies for my project through npm, as it keeps showing an error

Recently, I decided to delve into the world of HTML5 and javascript games by running a browser game from Github. The game that caught my eye is called BrowserQuest, and you can find it on Github. A hiccup arose while using npm debug: 237 error 404 Not ...

javascriptnode.jsnpm

Disable Autocomplete Chip functionality when only one can be selected

When multiple is set to true, I prefer the Chip option. Is there a way to enable the Chip functionality even when multiple is set to false? <Autocomplete className={classes.search} options={top100Films} ge ...

javascriptreactjsmaterial-ui

NextJS will redirect the user back to the previous router they came from following authentication

Hello! I am currently facing a challenge in redirecting a user back to the initial page they clicked on after being authenticated. The issue lies in server-side rendering (SSR) and the lack of access to the window.history object in getServerSideProps. The ...

javascriptnode.jsreactjsauthenticationnext.js

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

My next task involves creating an endpoint at /api that will blindly proxy requests and responses to a legacy RESTful API system built in Ruby and hosted on a different domain. This is just a temporary step to transition smoothly, so it needs to work seam ...

javascriptnode.jsrestrequestexpress

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

My button includes a text field that is constantly disabled. I would like for the text field to appear as bright as it does when the button is enabled. After disabling the button, they both appear dimmer compared to others and the text field follows suit ...

javascriptjqueryhtmldom

Using JQUERY to toggle classes conditionally

$('.showall').css("cursor","pointer").click(function() { $('.value-container').toggle(); $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : & ...

javascriptjquery

Reset the select boxes when a button is clicked

I'm currently utilizing Devextreme within my Angular application, and I have three dx-selectbox elements in the component. I am attempting to clear all three dropdown selections when clicking a "clear" button. Unfortunately, I am unable to find a way ...

javascriptangulartypescriptangular7devextreme

Is it possible to integrate a JavaScript library into the Vue prototype?

I've recently integrated ProgressBar.js library into my app, which is built using vue and laravel with laravel mix. After installing ProgressBar.js via npm install, I am unsure how to incorporate it into my .vue files. I'm considering adding it t ...

javascriptvue.js

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml