Why am I getting error in svg path tag attributes?-CodePudding

Why am I getting error in react for these attributes?

stroke-linecap="square"
stroke-linejoin="round"

should they be like - strokeLinecap, strokeLinejoin?

           <svg
              width="36"
              height="22"
              viewBox="0 0 36 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M26.1012 1.64432L34.9639 10.9994L26.1012 20.3545"
                stroke="black"
                stroke-linecap="square"
                stroke-linejoin="round"
              />
              <line
                x1="35"
                y1="11.043"
                x2="-4.37114e-08"
                y2="11.043"
                stroke="black"
              />
            </svg>

CodePudding user response：

I just learned that in react attribute names of JSX elements are not allowed to have hyphens in them. I hoped that the following could be a workaround (as it turns out - read further below - it isn't!)? I put the "critical" attributes into a single style attribute. I also adjusted your width, height and viewBox attributes (and added a stroke-width attribute). Now you can see that the stroke-linecap and stroke-linejoin attributes basically work as intended (but not in react ...):

<svg width="215" height="130"
     viewBox="-3 -2 43 26" fill="none"
     xmlns="http://www.w3.org/2000/svg">
 <path d="M26.1012 1.64432L34.9639 10.9994L26.1012 20.3545"
       style="stroke:black; stroke-width:5; stroke-linecap:square; stroke-linejoin:round" />
 <line x1="32" y1="11.043"
       x2="0" y2="11.043"
       style="stroke:orange; stroke-width:5; stroke-linecap:round" />
 <rect stroke="blue" style="stroke-width:.2" width="36" height="22" />
</svg>

I also changed a few of the line attributes to make it easier to demonstrate which bits of the SVG diagram are rounded and which ones aren't.

And I added a rect element with your original viewBox coordinates to illustrate how in your version the corners of the arrow would have been clipped.

Admittedly, I have never worked with react before. Therefore it came as a surprise to me how different these JSX elements are to "normal" DOM elements. It appears to me that the style attribute cannot be used in JSX svg elements. So, the solution suggested above will not work in react. Below I built a react snippet with the camelized version of the attributes. This also worked for OP.

React snippet:

// Render it
ReactDOM.render(
<svg width="215" height="130"
     viewBox="-3 -2 43 26" fill="none"
     xmlns="http://www.w3.org/2000/svg">
 <path d="M26.1012 1.64432L34.9639 10.9994L26.1012 20.3545"
       stroke="black"  strokeWidth="5" strokeLinecap="square" strokeLinejoin="round" />
 <line x1="32" y1="11.043"
       x2="0" y2="11.043"
       stroke="orange" strokeWidth="5" strokeLinecap="round" />
 <rect stroke="blue" strokeWidth=".2" width="36" height="22" />
</svg>  ,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>