Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)?

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
    <g>
    <path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" 
          style="fill:red;" />
    </g>
 </svg>
 </symbol>
</svg>

<div class="wave">

   <svg style="width: 100%; height: 150px; margin-top: -150px;">
      <use xlink:href="#wave"/>
   </svg>

</div>

The CSS code below currently applies a stroke around the entire SVG element. How can I modify it to only apply the stroke on the left and right sides:

svg {
   stroke: #000;
}

Fiddle: https://jsfiddle.net/fe43rt4v/1/

htmlcsssvg

Answer №1

  1. Adjust the path so that the left, bottom, and right edges are drawn first: 

    M0,30 v20 h100 v-20 Q70,40 50,30 T0,30
    . While not mandatory, this modification simplifies the process (otherwise you would have to calculate the length of the wave).

  2. Utilize stroke-dasharray to specify that the stroke should be drawn for the left edge (length 20), skip the bottom (length 100), add it for the right edge (length 20), and exclude the rest (using a length of 200 as a safety measure):

    stroke-dasharray: 20,100,20,200;

That's all there is to it!

Fiddle: https://jsfiddle.net/fe43rt4v/2/

svg {
stroke: #000;
  stroke-dasharray: 20,100,20,200;
}
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="wave">
    <svg viewBox="0 0 100 50" preserveAspectRatio="none" >
    <g>
      <path d="M0,30 v20 h100 v-20 Q70,40 50,30 T0,30" 
              style="fill:red;" />
    </g>
    </svg>
  </symbol>
</svg>

<div class="wave">
   <svg style="width: 100%; height: 150px; margin-top: -150px;">
  <use xlink:href="#wave"/>
   </svg>
</div>

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 tooltip in Bootstrap v2.3.2 is causing words to be cut right in half

The tooltip plugin is set up like this: $("#id").tooltip({ placement: 'top', trigger: 'hover', html: true, container: 'body' }); Is there a way to prevent this from happening? Appreciate any insights. ...

jquerycsstwitter-bootstrap

Embracing JQuery for Frontend Development with Node.js

I'm currently enhancing my node.js skills by utilizing express, and I've encountered a situation that is causing me some confusion. Essentially, when a user requests a webpage and the backend sends them the HTML page, how can I incorporate a Java ...

javascriptjqueryhtmlnode.js

providing the context for the hover title description

I seem to be struggling with a seemingly simple issue and can't find a solution. Below is the code I have written: <html> <head> <style> span.dropt { border-bottom: thin dotted; background:white; } </style> </head> ...

htmlcssbackground

Single input results in array output

I have a pair of items in this array list. $.each(data.recalls,function(i) { var recall = data.recalls[i].nnaId; var description = data.recalls[i].remedyDescription; console.log(recall); console.log(description); $('textarea[name= ...

javascripthtmlarrays

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

javascriptjqueryhtmliframecross-domain

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...

javascripthtmlangular

Attempting to design a customized dropdown navigation feature using HTML

I am having some trouble creating a dropdown menu that functions properly. Here is the code I have written: <div> <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A Subject:</H1> <select id ="dropDownId"> <!-- as ...

jqueryhtml

Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks. Even though I can successfully align them horizontally, I am facing issues with vertical alignment. What could be the mistake in my approach? .banner { padding- ...

htmlcssflexbox

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

There was an issue with the Google Maps embed API that resulted in an error with interpolation

My goal is to utilize the Google Maps API in order to showcase a map using data from a JSON file. However, whenever I attempt to incorporate the JSON data, an error message 'Error: [$interpolate:noconcat] Error while interpolating' pops up. < ...

javascripthtmlangularjsgoogle-maps

Remove the boundaries from the grid and only retain the box

I am not skilled in css, but I simply want to eliminate the interior edges of the box and retain only the outer edges. .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-ite ...

htmlcss

Create and dispatch a JSON POST request to a remote domain without direct server access

My current hurdle involves attempting a POST request in JSON to an external domain without having access to the server's files for modification. However, upon making the request, I encounter the following error: XMLHttpRequest cannot load . No & ...

jqueryhtmljsonajaxcross-domain

Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example. Here is the HTML structure: <div class="right-content" id="rc-0" style="height: 250px;"> <div class="right-cont-main" id="rcm-0" s ...

javascriptjqueryhtmlcss

Unusual behavior of diagonal viewBox in SVG

Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong... <svg class="s ...

csssvgpositionviewboxsizing

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

javascripthtmlcss

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...

jqueryhtml

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap ...

htmlcssangulartypescriptcanvas

The content on the right side is spilling over my footer and causing

I am struggling to understand why the content in the right column is overlapping my footer. I believe it has something to do with a float, but I can't seem to pinpoint the exact issue. Could you please take a look at this page for me and provide some ...

htmlcsscss-float

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid