SVG react component not rendered/black rectangle - javascript
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
Related
Different SVG Icons rendering the same?
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>
How to get parent group content from svg using javascript?
I want to get the content of <g> tag .
I have tried getElementsByTagName('g') but it returns all <g> in an array , I want just content of outer <g> .
Here is my svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{font-family:'MyriadPro-Regular';}
.st1{font-size:117.1799px;}
.st2{fill:#17519D;}
.st3{fill:#E1232E;}
.st4{fill:#FAFDF9;}
</style>
<g>
<text transform="matrix(1 0 0 1 161.3171 175.1665)" class="st0 st1">text</text>
<g id="xe_o3c0">
<g id="xe_6ipa">
<g id="xe_zj3t">
<path id="xe_ce0v" pointer-events="bounding-box" class="st2" d=".4l1."/>
</g>
</g>
</g>
<image style="overflow:visible;" width="728" height="625" xlink:href="http://magento1924.inkxe.com//xetool/assets/magento1924_inkxe_com/images/designs/16.jpg" transform="matrix(0.3073 0 0 0.3073 35.3171 216.8965)">
</image>
</g>
</svg>
Why don't you use id as the selector?
getElementsById('xe_6ipa')
To get the first group element in the SVG, you can use:
getElementsByTagName('g').item(0)
document.querySelector('g') will return the first outer instance that it finds, and returns the node instead of a NodeList.
Caption an SVG with <text> element?
I am new to working with SVGs. I am trying to caption an svg of a person with that person's name. Here is my attempt:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve">
<g>
<circle cx="129.375" cy="60" r="60"/>
<path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/>
<text text-anchor="middle" x="60" y="75">Person Name Here</text>
</g>
</svg>
When I try to anchor the text below the image the text disappears. how do I
Change the size of the image?
Leave space at the bottom of the image for the person's name?
Here is the snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text text-anchor="middle" x="60" y="75">Person Name Here</text></g></svg>'
$('#name').append(svg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
This may be what you need:
You can change the size of the image with css, it will scale all your svg.
You just need to give some more space to the viewBox and position your name accordingly.
Hope this helps, snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 350.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <style>.style1 {font-size: 15px;} </style> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text class="style1" text-anchor="middle" x="125" y="290">Person Name Here</text></g></svg>'
$('#name').append(svg);
svg, object {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
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>
Tooltip in svg a tag
I am using svg tag inside my angular page ..
Below is the code for reference
`
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" focusable="false">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#3FA9F5;}
.st2{font-family:'FontAwesome';}
.st3{font-size:20px;}
</style>
<g>
<a class="pointer" href="#" uib-tooltip ="Testing" tooltip-placement ="right" ng-click="doPTZOperation(0,1,2);$event.preventDefault();">
<path class="st0" d="M122.3,44.7l15.5-36.8c-25-10.3-51.1-10-75.3-0.4l15,37.1C91.5,39.1,107.4,38.7,122.3,44.7z"/>
<text transform="matrix(0.7404 -0.6722 0.6722 0.7404 98.521 31.4565)" class="st1 st2 st3" ></text>
</a>
`
But,the tooltip is not working ...