Iterating through an SVG path multiple times

If I have the arrow below and I want to place it at various locations within the svg:

<svg width="400" height="400">
<path transform="translate(150,100)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(300,200)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(150,300)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
</svg>

In case I decide to change the path shape in the future, I would like to avoid repeating the d attribute multiple times.

Is there a way to define the path's shape once and then position it at different x, y coordinates without using JavaScript?

A couple of considerations:

Is there a method to prevent copying the entire code repeatedly besides injecting it using JavaScript?

javascriptcsssvg

Answer №1

Adding to JCD's answer, this explanation showcases why the <symbol> element is not necessary in this scenario. While <symbol> elements offer unique features, they are redundant when simply reusing an element.

<svg width="400" height="400">
  <defs>
    <path id="mypath" fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>

Answer №2

<defs> actually allows the use of <path>, as it falls under the category of "Shape Element" according to the documentation. However, the primary purpose of <defs> is simply to organize your SVG content in a semantic way. If you're aiming to define and reuse shapes, you should focus on using <symbol> and <use>.

<symbol> serves as a template that can be reused multiple times.

<use> creates instances of the specified symbols.

<svg width="400" height="400">
  <defs>
    <symbol id="mypath">
      <path fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
    </symbol>
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>

Your <path> data may need adjustments, especially if it extends beyond the visible area of the element. I recommend starting your path from the left edge of the element to avoid potential cropping issues, eliminating the need for the transform property. You can refer to the example above for a clearer understanding of this approach.

Explore more about <symbol> here

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

Redirecting asynchronously in Node.js with no use of AJAX

I've been struggling with this issue for days and have already sought help, but nothing seems to be working. Whenever I attempt to redirect from a POST request in node, the browser doesn't respond. Here's how my app is structured: ./ confi ...

javascriptnode.jsexpress

Utilizing an external JavaScript file for developing applications on Facebook

I am looking to incorporate external JavaScript into my Facebook application development. Specifically, I am hoping to utilize the Ajax tab feature in my application. ...

javascriptajaxfacebook

Activate Gulp watcher to execute functions for individual files

I have developed a specific function that I need to execute only on the file that has been changed with gulp 4.0 watcher. For example, the current task setup looks like this: gulp.watch([ paths.sourceFolder + "/**/*.js", paths.sourceFolder + "/**/ ...

javascriptnode.jsnpmgulpgulp-4

Incorporating JSON data into an array using d3

I'm currently working on mapping JSON data to an array variable in d3. Below is the JSON I am using: [ { "Impressions": "273909", "Clicks": "648", "CPM": 4.6388278388278, "Cost": 1266.4, "CPC": 1.9543209876543, "Campaign": "C ...

javascriptarraysjsond3.jsdata-visualization

showing the response message from a post request using Vue.js and Axios

Within APIService.js, there's a function: createPatient(data){ const url = 'http://192.168.1.3/api/clinic/patient/add/'; return axios.post(url, data).then(resp => {return resp}); } In the script tag of my vue component: result ...

javascriptvue.jsaxios

Could you lend a hand in figuring out the root cause of why this Express server is constantly serving up error

I am encountering a 404 error while running this test. I can't seem to identify the issue on my own and could really use another set of eyes to help me out. The test involves mocking a request to the Microsoft Graph API in order to remove a member fro ...

javascriptnode.jstypescriptexpressaxios

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

Error: Unable to access property 'count.' because it is undefined

componentDidMount(props) { this.interval = setInterval(() => { if (props.count !== 0) { this.stateHandler() } }, 1000) } Encountering an issue with the interval, as the console is displaying the following error: Type ...

javascripthtmlnode.jsreactjs

What is the best way to access nested objects in React Native?

Here is the JSON data I am working with: [ { id: 51, name: 'Boat Neck Blouse', image: { id: 669, date_created: '2018-08-27T10:05:39', date_created_gmt: '2018-08-27T10:05:39', date_modified ...

javascriptreactjsreact-native

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

Make sure to incorporate certain node_modules folders within Babel 7

My issue involves a dependency located in the node_modules directory that requires compilation through Babel. Despite upgrading my stack, I am unable to get Babel to compile the dependency. Current versions: @babel/core 7.5.4 webpack 2.7.0 Here is my w ...

javascriptreactjswebpackbabeljsjsx

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...

htmlcssgoogle-chrometwitter-bootstrap

Customize the keyboard on your iPod by replacing the default one with a

Looking to customize the iPOD keyboard to only display numbers, similar to a telephone keypad: https://i.stack.imgur.com/X0L3y.png The current iPOD default keyboard looks like this: https://i.stack.imgur.com/VykjU.png ...

javascriptjquerycssipodipod-touch

I'm puzzled as to why, but my code seems to be causing an issue with the command prompt, possibly due

Recently, I've been taking on the challenges of Advent of Code. Day 2 has me stumped, as there's a peculiar issue with the code when running it through node.js in the command prompt: const fs = require("fs"); var valid = fs.readFileSync("inpu ...

javascriptnode.jsloops

image source that changes dynamically with a placeholder image

Currently, I am facing a certain issue. Unfortunately, I cannot provide a plunkr example as the image is sourced from a protected site and there are no open URLs available that constantly serve changing images. Additionally, I am unable to use a local anim ...

javascriptangularjs

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js

Issue with react-addons-css-transition-group and multiline TextFields in Material-UI TextField

If a TextField with multiline is nested inside a react-addons-css-transition-group, it seems to disrupt the show transition. Any suggestions on how to handle this situation effectively? Check out my code snippet here: https://codesandbox.io/s/material-dem ...

javascriptreactjsmaterial-ui

Experience the auditory bliss with Javascript/Jquery Sound Play

I am creating an Ajax-driven application specifically for our local intranet network. After each response from my Ajax requests, I need to trigger a sound in the client's browser. I plan to store a sound file (mp3/wav) on our web server (Tomcat) for ...

javascriptjquery

Searching for Bluetooth devices using React Native

In my project, I am working on scanning HM-10 BLE with a react-native app. To achieve this, I referred to the example provided in Scanning for Bluetooth devices with React Native. So far, the library seems to be successfully installed without any errors du ...

javascriptreact-nativebluetoothbluetooth-lowenergycore-bluetooth

Pass the ID of a dynamic textbox element to a child window upon clicking a link

One of the challenges I'm facing involves a textbox labeled "Branch Code" that links a branch to a corporate card transaction. At times, there is a requirement to split a transaction among multiple branches. To facilitate this process, I am constructi ...

javascriptc#jqueryasp.netasp.net-mvc-5