Different SVG Icons rendering the same? - javascript

I have two SVG icons I'm importing within my react application using "react-svg-loader"
The icons are imported as components with their own paths yet the output is the same for which ever icon is first in the code.
Why is this happening and how can I fix this?
Here is my code:
import React, { Component } from 'react';
import Navigation from '../Navigation/index.js';
import MainLogo from '../MainLogo/index.js';
import Search from '../Search/index.js';
import './index.css'; // styles from
import Logo from '../../assets/svg/logos/Voo_Main.svg';
import SearchIcon from '../../assets/svg/icons/search.svg';
export default class Header extends Component {
render() {
const { navItems } = this.props;
return (
<header className="header">
<SearchIcon />
<Logo />
</header>
);
}
};
Here is the output:
Here is my loader within my webpack config:
// react-svg-loader
// https://www.npmjs.com/package/react-svg-loader
{
test: /\.svg$/,
use: [
{
loader: "babel-loader",
},
{
loader: "react-svg-loader",
options: {
jsx: true, // true outputs JSX tags
},
},
],
},
Here is the code for the SVG icons from the DOM:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M14.5 16A6.508 6.508 0 0 1 8 9.5C8 5.916 10.916 3 14.5 3S21 5.916 21 9.5 18.084 16 14.5 16m0-15C9.813 1 6 4.813 6 9.5c0 1.983.688 3.807 1.832 5.254l-6.539 6.539a.999.999 0 1 0 1.414 1.414l6.539-6.539A8.443 8.443 0 0 0 14.5 18c4.687 0 8.5-3.813 8.5-8.5C23 4.813 19.187 1 14.5 1"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#121A28" mask="url(#b)">
<path d="M0 24h24V0H0z"></path>
</g>
</g>
</svg>
Second icon:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="50" viewBox="0 0 120 50">
<defs>
<path id="a" d="M95.448 0c-6.967 0-13.25 2.905-17.717 7.567C73.262 2.905 66.979 0 60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81 2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0 13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91 17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969 0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718 7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008 0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327 1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1 1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337 9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0 0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903 10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#FEFEFE" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"></path>
</g>
</g>
</svg>


If you convert the SVG to a .jsx file and modify the attributes so it's .jsx-friendly, it will render the SVGs as if it were a .svg file.
import * as React from 'react';
const svg = (
<div>
<svg
width="120"
height="50"
viewBox="0 0 120 50"
>
<defs>
<path
id="a"
d="M95.448 0c-6.967 0-13.25
2.905-17.717 7.567C73.262 2.905 66.979 0
60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81
2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0
13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91
17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969
0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718
7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008
0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327
1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1
1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337
9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0
0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898
0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903
10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018
0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899
6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"
/>
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b" fill="#fff">
<use xmlns="http://www.w3.org/1999/xlink" xlinkHref="#a"/>
</mask>
<use fill="#FEFEFE"/>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"/>
</g>
</g >
</svg >
</div>
);
Excuse the blue background. That's the background color I have in my test dev environment.


Encountered the same issue - it seems that different SVGs used the same path id.
This is how I solved it - changed each SVG file to use different ID:
In your case - you should change the second SVG:
<path id="a" to <path id="b"
AND
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>
AND
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>

Related

Removing gap between two SVG paths without removing anti-aliasing

I have two SVG paths that have a gap between them.
From reading through other questions (in particular this one) I understand this is because of the native anti-aliasing properties of SVGs.
So I added shapeRendering="crispEdges"
This does remove the gap. However it results in jagged edges because of the removal of anti-aliasing.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
/>
</svg>
I've also tried the suggestion in this question to add crispEdges to the parent svg of the path and add shapeRendering="optimizeQuality" to the path but that didn't work.
How can I remove the gap AND keep the smooth edges of my svg path?

You could also mitigate this gap rendering effect by applying a subtle svg feMorphology dilate filter – resulting in slightly expanded strokes closing thin gaps between paths:
SVG feMorphology filter
svg {
overflow: visible;
}
.chart path {
filter: url(#outline);
}
path:hover {
stroke: red;
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<g class="original">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Original</text>
</svg>
<svg height="300" width="300">
<filter filterUnits="userSpaceOnUse" id="outline" >
<feMorphology in="SourceGraphic" result="DILATED" operator="dilate" radius="0.5" />
</filter>
<g class="chart">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Dilate filter</text>
</svg>
But this approach will also introduce slightly rounded edges (you can see this effect on hover).
More importantly, svg filters are quite expensive with regards to rendering performance – rather negligible if you only display a few elements per page view.
Add concatenated background path
As suggested by #Robert Longson: you could also prepend a background path based on concatenated d path data.
This task could be achieved with a javaScript helper method cloning the first path and displaying the concatenated paths.
addBgPaths(".addBGPath");
function addBgPaths(selector) {
let addPathSvgs = document.querySelectorAll(selector);
addPathSvgs.forEach(function(svg) {
let paths = document.querySelectorAll(".addBGPath path");
let firstPath = paths[0];
let firstPathCloned = firstPath.cloneNode();
//cloned elements shouldn't have ids to avoid non unique ids
firstPathCloned.removeAttribute("id");
let dArr = [firstPath.getAttribute("d")];
for (let i = 1; i < paths.length; i++) {
let path = paths[i];
let d = path.getAttribute("d");
dArr.push(d);
}
firstPathCloned.setAttribute("d", dArr.join(" "));
svg.insertBefore(firstPathCloned, svg.children[0]);
});
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Original</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first2" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Add bg path</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Add bg path (red)</text>
</svg>
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Original (red)</text>
</svg>
If all your path segments have the same color, this is probably the most elegant solution.
But this approach will also introduce colored "halos" when segments use different stroke colors (example #3 compared to #4).

If you able to edit the svg in editor, you can overlap like this. The darker green is the intersection between two paths.

As a quick fix, you can make the ends overlap with stroke-linecap="square"
But ideally, you need to create a single path instead of two separate paths.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
</svg>

How to change or override common component in React js

I have one common component for which I want to change its color property to use it at other place.
const ViewAllIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 26 27"
{...props}
>
<path
fill="var(--primary)"
d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
/>
<path
fill="#FFF"
d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
/>
</svg>
);
export default ViewAllIcon;
This is common component having primary blue and white color.
<ViewAllIcon className="ml8" fill="white" />
I am using it to change the fill color to white and green.

change fill value to "currentColor" and than pass color var to component.
ViewAllIcon({ color: 'var(--primary)' })
or
<ViewAllIcon color={'var(--primary)'} />
const ViewAllIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 26 27"
{...props}
>
<path
fill="currentColor"
d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
/>
<path
fill="currentColor"
d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
/>
</svg>
);
export default ViewAllIcon;

You could put the props directly to fill attribute
Something like this:
const ViewAllIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 26 27"
{...props}
>
<path
fill={props.fill} // <--- UPDATE HERE!
d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
/>
<path
fill="#FFF"
d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
/>
</svg>
);
export default ViewAllIcon;
Working Example:

SVG path overflow and centered dynamically

I have the SVG path curve that should be centered every time on the center icons, even I add the text below icon on above them, how to hold this line to the center of the icon. Should I draw it as one path or as several paths? I've hot now such picture codepen .I use foundation zurb 6.Is it possible to hold the line to svg cordinate with Javascript and make it responsive? Or Snap.svg
I try to achieve this one :
<div class="wrapper">
<div class="container">
<div style="text-align:center">
<h1> The text should not shift the line</h1></div>
<div class="row columns">
<div class="svg-container">
<!-- The line -->
<svg class="red svg svg-1 svg-2" preserveAspectRatio="none">
<!--лишню лінію викинути-->
<path d="M 50 0 l 0 27 q 0 50 50 50 l 1000 0 q 50 0 50 50 l 0 150" stroke="#d4d4d4" stroke-width="1" fill="none" />
<path d="M 50 0 l 0 27 q 0 50 50 50 l 2000 0 " stroke="#d4d4d4" stroke-width="1" fill="none" />
</svg>
<svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="75.001px" height="75px" viewBox="0 0 75.001 75"
enable-background="new 0 0 75.001 75" xml:space="preserve">
<switch>
<g i:extraneous="self">
<g>
<!-- circle for closing LINES 1 -->
<circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" />
<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<path fill="#FFD100" d="M64.017,10.984C56.934,3.9,47.517,0,37.5,0S18.067,3.901,10.984,10.984S0,27.484,0,37.5
c0,10.017,3.901,19.433,10.984,26.517C18.067,71.1,27.483,75,37.5,75s19.434-3.9,26.517-10.982
c7.083-7.084,10.984-16.5,10.984-26.517C75.001,27.484,71.1,18.067,64.017,10.984z M72.001,37.5c0,2.656-0.308,5.264-0.889,7.791
l-6.286-7.793l6.278-7.823C71.69,32.212,72.001,34.832,72.001,37.5z M13.105,13.105C19.622,6.588,28.285,3,37.5,3
s17.879,3.588,24.396,10.105c3.739,3.739,6.509,8.188,8.195,13.04l-7.043,8.775c-5.706-8.429-15.305-13.585-25.547-13.585
S17.66,26.491,11.954,34.92L4.91,26.144C6.597,21.292,9.366,16.844,13.105,13.105z M61.151,37.5
c-5.063,8.144-14.045,13.166-23.65,13.166S18.914,45.645,13.851,37.5c5.063-8.144,14.045-13.166,23.65-13.166
S56.088,29.357,61.151,37.5z M3,37.5c0-2.669,0.311-5.289,0.896-7.827l6.279,7.824l-6.287,7.795C3.308,42.766,3,40.157,3,37.5z
M61.896,61.896C55.379,68.412,46.715,72,37.5,72s-17.878-3.588-24.395-10.104c-3.749-3.75-6.522-8.211-8.208-13.078l7.053-8.742
c5.706,8.432,15.307,13.59,25.551,13.59s19.845-5.158,25.551-13.59l7.052,8.742C68.419,53.685,65.645,58.146,61.896,61.896z"/>
<path fill="#FFD100" d="M37.501,26.833c-5.882,0-10.667,4.785-10.667,10.667c0,5.881,4.785,10.666,10.667,10.666
c5.881,0,10.666-4.784,10.666-10.666C48.167,31.619,43.382,26.833,37.501,26.833z M37.501,45.166
c-4.228,0-7.667-3.438-7.667-7.666c0-4.228,3.439-7.667,7.667-7.667s7.666,3.439,7.666,7.667
C45.167,41.728,41.729,45.166,37.501,45.166z"/>
<path fill="#FFD100" d="M37.501,34.583c-1.608,0-2.917,1.309-2.917,2.917c0,1.608,1.309,2.916,2.917,2.916
c1.607,0,2.916-1.308,2.916-2.916C40.417,35.892,39.108,34.583,37.501,34.583z"/>
</g>
</g>
</switch>
</svg>
<svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.963px" height="75px" viewBox="0 0 74.963 75"
enable-background="new 0 0 74.963 75" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<g>
<!-- circle for closing LINES 2 -->
<circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" />
<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<path fill="#FFD100" d="M63.998,10.984C56.914,3.9,47.497,0,37.48,0S18.048,3.901,10.965,10.984
c-14.62,14.621-14.62,38.412,0,53.033C18.048,71.1,27.464,75,37.48,75s19.434-3.9,26.518-10.983
C78.618,49.396,78.618,25.605,63.998,10.984z M61.877,61.896C55.36,68.412,46.696,72,37.48,72
c-9.215,0-17.878-3.589-24.395-10.104c-13.45-13.451-13.45-35.339,0-48.791C19.603,6.588,28.266,3,37.48,3
c9.216,0,17.88,3.588,24.396,10.105C75.327,26.557,75.327,48.445,61.877,61.896z"/>
<path fill="#FFD100" d="M34.736,37.307H17.043c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5h17.693
c0.828,0,1.5-0.671,1.5-1.5V38.806C36.236,37.978,35.564,37.307,34.736,37.307z M33.236,55H18.543V40.306h14.693V55z"/>
<path fill="#FFD100" d="M57.92,37.307H40.227c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5H57.92
c0.828,0,1.5-0.671,1.5-1.5V38.806C59.42,37.978,58.748,37.307,57.92,37.307z M56.42,55H41.727V40.306H56.42V55z"/>
<path fill="#FFD100" d="M47.828,33.667V15.974c0-0.829-0.672-1.5-1.5-1.5H28.635c-0.828,0-1.5,0.671-1.5,1.5v17.693 c0,0.829,0.672,1.5,1.5,1.5h17.693C47.156,35.167,47.828,34.496,47.828,33.667z M44.828,32.167H30.135V17.474h14.693V32.167z"/>
</g>
</g>
</switch>
</svg>
<svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.963px" height="75px" viewBox="0 0 74.963 75"
enable-background="new 0 0 74.963 75" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<g>
<!-- circle for closing LINES 3 -->
<circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" />
<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<path fill="#FFD100" d="M63.998,10.984C56.914,3.9,47.497,0,37.48,0S18.048,3.901,10.965,10.984
c-14.62,14.621-14.62,38.412,0,53.033C18.048,71.1,27.464,75,37.48,75s19.434-3.9,26.518-10.983
C78.618,49.396,78.618,25.605,63.998,10.984z M61.877,61.896C55.36,68.412,46.696,72,37.48,72
c-9.215,0-17.878-3.589-24.395-10.104c-13.45-13.451-13.45-35.339,0-48.791C19.603,6.588,28.266,3,37.48,3
c9.216,0,17.88,3.588,24.396,10.105C75.327,26.557,75.327,48.445,61.877,61.896z"/>
<path fill="#FFD100" d="M34.736,37.307H17.043c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5h17.693
c0.828,0,1.5-0.671,1.5-1.5V38.806C36.236,37.978,35.564,37.307,34.736,37.307z M33.236,55H18.543V40.306h14.693V55z"/>
<path fill="#FFD100" d="M57.92,37.307H40.227c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5H57.92
c0.828,0,1.5-0.671,1.5-1.5V38.806C59.42,37.978,58.748,37.307,57.92,37.307z M56.42,55H41.727V40.306H56.42V55z"/>
<path fill="#FFD100" d="M47.828,33.667V15.974c0-0.829-0.672-1.5-1.5-1.5H28.635c-0.828,0-1.5,0.671-1.5,1.5v17.693 c0,0.829,0.672,1.5,1.5,1.5h17.693C47.156,35.167,47.828,34.496,47.828,33.667z M44.828,32.167H30.135V17.474h14.693V32.167z"/>
</g>
</g>
</switch>
</svg>
</div>
</div>
</div>
</div>

SVG react component not rendered/black rectangle

I'm trying to render an svg within a react component.
here's the svg that is rendered correctly
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 427.3 444.5" style="enable-background:new 0 0 427.3 444.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#7FD093;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{display:none;fill:none;}
</style>
<symbol id="Stylish" viewBox="-154 -190.2 154 380.4">
<path id="XMLID_12_" class="st0" d="M-46.5,165c-6.7-3.3-15.6,2.9-15.8,10.4c-0.2,7.5,7.2,13.9,14.7,13.8s14.2-5.8,16.7-12.9
c4.5-12.7-3.7-26.7-14.4-34.9s-23.8-12.6-35.1-19.9c-9-5.8-16.7-13.4-22.7-22.2c-1.9-2.8-3.8-6.1-3.6-9.5c0.4-7.6,11.7-11,17.3-5.8
c5.6,5.2,4.6,15-0.7,20.4c-5.4,5.4-13.7,6.9-21.2,5.7c-9.5-1.5-18.5-7-23.2-15.3c-4.8-8.3-4.7-19.5,0.9-27.2
c7.6-10.5,23.2-13.3,29.7-24.5c5.2-8.9,2.7-20.8-3.5-29s-21.1-26.8-38.4-20.1c-7.4,2.8-7.8,15.3-5,20.2c7.7,13.3,21.9,5.7,24-5
c2.6-12.9-12.1-51-0.2-66.7c16-21,45.3-22,49.8-8.6c2.9,8.6-1.9,19.6-12.1,21.1c-9.1,1.3-20-8.1-18.6-41.2
c2.7-64.1,62.8-62.8,72.2-64.1c9.4-1.3,33.4-2.7,34.7-21.4S-22.2-195-24-181.1c-1.3,10.3,9.6,8,9.6,8"/>
<polygon id="XMLID_13_" class="st1" points="-154,190 0,190 0,-190 -154,-190 "/>
</symbol>
<use xlink:href="#Stylish" width="154" height="380.4" id="XMLID_1_" x="-154" y="-190.2" transform="matrix(1 0 0 -1 190.6723 229.2729)" style="overflow:visible;"/>
<use xlink:href="#Stylish" width="154" height="380.4" id="XMLID_5_" x="-154" y="-190.2" transform="matrix(-1 0 0 -1 236.6723 229.2729)" style="overflow:visible;"/>
</svg>
and here's my react component, i converted all the attributes but nothing happens/ or, if I play with the viewBox a black rectangle appears.
import React from 'react';
var _ = require('lodash');
export class SVGStylish extends React.Component{
render(){
return(<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x={0} y={0}
viewBox="0 0 427.3 444.5" style={{enableBackground:'new 0 0 427.3 444.5'}}
xmlSpace="preserve">
<symbol id="Stylish" viewBox="-154 -190.2 154 380.4">
<path id="XMLID_12_"
style = {{
fill:'none',
stroke:'#7FD093',
strokeWidth:2,
strokeLinecap:'round',
strokeLinejoin:'round',
strokeMiterlimit:10
}}
d="M-46.5,165c-6.7-3.3-15.6,2.9-15.8,10.4c-0.2,7.5,7.2,13.9,14.7,13.8s14.2-5.8,16.7-12.9
c4.5-12.7-3.7-26.7-14.4-34.9s-23.8-12.6-35.1-19.9c-9-5.8-16.7-13.4-22.7-22.2c-1.9-2.8-3.8-6.1-3.6-9.5c0.4-7.6,11.7-11,17.3-5.8
c5.6,5.2,4.6,15-0.7,20.4c-5.4,5.4-13.7,6.9-21.2,5.7c-9.5-1.5-18.5-7-23.2-15.3c-4.8-8.3-4.7-19.5,0.9-27.2
c7.6-10.5,23.2-13.3,29.7-24.5c5.2-8.9,2.7-20.8-3.5-29s-21.1-26.8-38.4-20.1c-7.4,2.8-7.8,15.3-5,20.2c7.7,13.3,21.9,5.7,24-5
c2.6-12.9-12.1-51-0.2-66.7c16-21,45.3-22,49.8-8.6c2.9,8.6-1.9,19.6-12.1,21.1c-9.1,1.3-20-8.1-18.6-41.2
c2.7-64.1,62.8-62.8,72.2-64.1c9.4-1.3,33.4-2.7,34.7-21.4S-22.2-195-24-181.1c-1.3,10.3,9.6,8,9.6,8"/>
<polygon id="XMLID_13_" points="-154,190 0,190 0,-190 -154,-190 "/>
</symbol>
<use xlinkHref="#Stylish" width="154" height="380.4"
id="XMLID_1_" x="-154" y="-190.2"
style={{transform:"matrix(1 0 0 -1 190.6723 229.2729)", overflow:'visible'}}
/>
<use xlinkHref="#Stylish" width="154" height="380.4"
id="XMLID_5_" x="-154" y="-190.2"
style={{transform:"matrix(-1 0 0 -1 236.6723 229.2729)", overflow:'visible'}}
/>
</svg>
);
}
}
the react component seems to render correct elements, attribute and styles.
any ideas? I'm sure i'm missing something..
Thanks in advance

Hi the problem is that you were missing the style of the polygon st1.
I have created a css and added the class name.
I have refactor the code and you can see it working here

How to animate changing path lengths (line) with markers in svg

I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.

I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>

Categories

Resources