What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such as stroke, stroke-width, and stroke-dash-array. However, applying these changes to the <image> tag directly or through CSS styling does not seem to be effective. Even trying the border style did not yield the desired result. How can I resolve this?

As per information from MDN, <image> should support global attributes, including presentation attributes, which implies that it should work correctly. Additionally, inspecting the <image> element in a browser reveals that it follows the box model and should be highlightable.

<svg viewBox="0 0 1370 1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image width="128" height="128" x="617.9207153320312" href="data:some-valid-link" style="stroke-width: 3px; stroke-dasharray: 7px;" stroke="#3aa2c2"></image>
</svg>
javascripthtmlcsssvgsnap.svg

Answer №1

Adding a stroke to an image might not be achievable.

Generally, strokes are applied to vector images rather than raster images. Attempting to apply a stroke to a raster image may not produce the desired result.

To create a border around a square image, consider utilizing the border property as an alternative solution.

If you need to add lines around a complex shape, it is unlikely that CSS alone can accomplish this task. You may need to use graphic design software to achieve the desired effect.

Answer №2

When dealing with external SVG files loaded in an <img> tag, restyling them can be a challenge.

One workaround is to directly insert the <svg> code into your HTML and then apply styles as demonstrated in this example (view source svg):

svg {
  width: 500px;
}

svg path,
svg polygon {
  stroke-width: 10px;
  stroke-dasharray: 10px;
}
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  Sorry, your browser does not support inline SVG.
</svg>

Answer №3

In order to effectively target all the vectors in an SVG, it is important to use a more specific code rather than just a 

tag<code>. This can be achieved by making groups within the SVG that correspond to different parts of the image or drawing that you want to style. To do this, you can utilize software like illustrator to group the elements and assign them unique IDs within a <code><g id="group_to_style" >
tag. Once the groups are created, they can be targeted and styled using CSS for various effects including animation. It is essential to note that without utilizing these groups, styling or animating elements within an SVG may not be possible.

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 box is having trouble with its animation

This issue revolves around the use of CSS3 properties like -webkit-keyframes and -webkit-box-align. To learn more about this problem, please check out http://codepen.io/pleasureswx123/pen/fljFH /* sample css code */ <style> .box { di ...

cssanimation

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

I've been developing a web application that allows users to store collections. There is a dashboard page where all the user's collections are displayed in a table format, with each row representing a collection and columns showing the collection ...

javascriptreactjstypescriptnext.js

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

jqueryhtmlnode.jscsscakephp

Blending HTML elements with ASP.NET code

Trying to concatenate two strings separated by a line break. This snippet shows what I am attempting: <td>@(string.Join("<br /> ", report.TimeReportProjects.Select(x => x.Project.ProjectName)))</td> <td>@(string.Join("<br /& ...

htmlasp.net

Display the image regardless of whether the component is currently visible

I need help with my Vue.js web application that includes a side navigation menu component. This component uses conditional rendering to display only when necessary. Within the component, there is an image for the close button of the side menu. <transiti ...

javascriptvue.js

Error: The function this.saveAlpha is not recognized in the current context at eval

This code features a start button, stop button, and a timer. The goal is to retrieve information from the phone using events like DeviceOrientationEvent, which includes properties such as absolute, alpha, beta, and gamma (referenced in this link: here). I& ...

javascriptvue.js

What are the best scenarios for implementing jQuery-ui plugin as opposed to Backbone View?

I am feeling uncertain about the concept of "componentization" in web UI development. When I need a component, should I develop my own jQuery-UI plugin or opt for creating a MarionetteComponent if I am using Backbone.Marionette? Both options provide reusa ...

javascriptjquerybackbone.jsmarionette

Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...

cssbootstrap-5

Tips for passing input fields from a React Function component to a function

How can I retrieve the values from 4 input fields in my react functional component using a function called contactMeButtonPressed? The inputs include name, email, company name, and message when the contact me button is clicked. Do I need to implement stat ...

javascriptreactjs

What sets this.prototype apart from module.exports?

As a newcomer to the world of Node.js, I am eager to gather information, experiment with testing techniques, and explore the code written by others. In my exploration, I have noticed that creating and requiring modules is a common practice in Node.js. Dif ...

javascriptnode.js

converting JSON values into an array of strings in JavaScript

Greetings to all! I am excited to be a part of this community as I embark on my programming journey. I haven't been able to find any information on this particular topic, so I've taken the initiative to start a new discussion. If anything seems o ...

javascriptjson

Generating unique spreadsheet identifiers in an HTML file

When it comes to displaying a chart using Google Sheets, I encounter an issue where the data is sourced from the same spreadsheet: function updateChart() { var ui = HtmlService.createHtmlOutputFromFile('ChartLine').setWidth(1350).setHeight(550) ...

javascripthtmlgoogle-apps-scriptgoogle-visualization

Guide on setting up a Redirect URL with React Router

I am aiming to trigger a redirect URL event using ReactJS. Is there a way to achieve this? I have already attempted the following: successRedirect(){ this.transitionTo('/'); } as well as successRedirect(){ this.router.transitionTo ...

javascripthttp-redirectreactjsreact-router

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

javascripthtmlcssfetch-api

Navigate through a given value in the event that the property undergoes a name change with each

Exploring an example found on the JSON site, I am facing a situation where I am using an API with JSON data. The property name "glossary" changes for each request made. For instance, if you search for "glossary", the first property is glossary. However, if ...

javascriptjqueryjson

Activate function when list item is clicked

My goal is to execute a function when users click on the li elements in the snippet below without relying solely on onclick. For instance, clicking on the first li element (with a value of 1) should trigger a function where the value "1" is passed as an ar ...

javascriptjquerycss

What is the standard error function used for jQuery promises?

Is there a way to establish a default error handling function for a jQuery promise? I am running a series of functions asynchronously, and if any of them encounter an error, I want the error to be reported. Currently, this is how I have to handle it: fun ...

javascriptjquerypromise

Having trouble saving text in a textbox?

Is there a way to store text in a text box for future use? Every time I reload the page, the text in the box disappears. I have attempted the following solution: <td align='left' bgcolor='#cfcfcf'><input type="text" name="tx ...

javascriptcsshtml

Concurrent execution within a Node.js function

I am facing a challenge with my function that deals with 1400+ crypto pairs. Each pair requires an API call and data storage, resulting in a significant amount of time for the entire process. The bottleneck occurs because each pair takes approximately 3-4 ...

javascriptnode.js

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

What is the best approach to make a dictionary reactive as one of my store variables? Unlike an array, dictionaries are not reactive by default. Here's a minimal example I've created: Check out this example on CodeSandbox ...

javascriptvue.jsvuexvue-reactivity