How can I mix SVG and HTML into a page? - firefox

I've been using the jQuery.svg plugin to do some SVG rendering and it works perfectly but I also want to have the server render some SVG into the page and I can't get that to work. How do I add some SVG like below into the page so that Firefox will render it?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>
<svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow?


See this link (SVG in HTML introduction # Mozilla Developer Center).
An inline SVG example can be seen here.


In 2020, using SVG in html or xhtml is now possible in all browsers.
Example of HTML / SVG(2.0) code that I use
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
<p>
<b>Electricity Plan</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
<g id="prise">
<line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
<line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
<path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
<line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
<line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
</g>
</defs>
<line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
<use href='#prise' x='140' y='50'/>
</svg>
</body>
</html>


What is your doctype? Make sure it is the same as the example, i.e. XHTML, not HTML 4.01 TRANSITIONAL.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Here's an example of building inline SVGs dynamically with JavaScript.

Related

SVG animation guidance needed

I read this Pocket Guide to SVG today and learned a lot from it, but... it does not cover animation. I need some guidance on how to do a simple animation. I dont need any transitions between frames, I just want to define shapes for frame one, shapes for frame two, etc.
https://svgpocketguide.com/book/
<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<!-- the doctype and svg need to be like this to render in Firefox -->
<rect width="1080" height="1080" fill="white"/>
<!-- delay frames by waiting 0.5 seconds between frames -->
<animation frame 1>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 1>
<animation frame 2>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 2>
</svg>

<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<rect width="1080" height="1080" fill="white"/>
<line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
<animate
attributeName="x1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="y1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="stroke"
dur="0.5s"
values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
calcMode="discrete"
repeatCount="1"
/>
</line>
<circle cx="50" cy="50" r="5" fill="black" />
<circle cx="100" cy="100" r="5" fill="black" />
<circle cx="200" cy="200" r="5" fill="black" />
<circle cx="350" cy="350" r="5" fill="black" />
<circle cx="400" cy="400" r="5" fill="black" />
</svg>

This question shows a method for frame-based animation in an SVG. It uses CSS animation, but you could achieve the same thing with SMIL. However, the CSS way is a little cleaner IMO.
SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)
Here's another answer, that may help: SVG frame-based animation

save svg to .svg with foreignObject

I use saveSvgAsPng to get svg`s dataUri. Then I converted the dataUri to .svg by Java.The original picture had foreginObject tag.When I save it to .svg,and open it with chrome,the foreignObject tag do not show.This is my .svg tag
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1477" height="1033" class=".save" style="-webkit-tap-highlight-color:rgba(0,0,0,0)" id="saveImg" viewBox="-201.48349917081265 -185.1995003306789 1477 1033" preserveASpecRatio="none" version="1.1">
<g>
<g class="textGroup">
<text>This is test</text>
</g>
<g>
<foreignObject x="200" y="50" width="200" height="200">
<div>
<p style="color:rgb(0,0,0)">this is P</p>
</div>
</foreignObject>
</g>
</g>
</svg>
As you know,Directly with chrome open. svg do not have <html>and <body>

MaterialPrime use h:commandButto analog

I have a problem. In my project I use MaterialPrime lib and Material Design Lite. On my login page I use the m:button element to submit form (as I understand Ajax request happens here). Then redirect to panel page where I include resources, but I receive error for PrimeFaces.ajax (ajax property is null). But using h:comandButton solves this problem. Is there some fix?
Maybe attribute for m:button not to do ajax request, or another button tag? I need this button for page style.
This is login page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:mp="http://primefaces.org/ui/material"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Welcome to Joy</title>
<h:outputStylesheet library="css" name="general.css" />
</h:head>
<h:body>
<ui:debug hotkey="x" />
<div class="center">
<h:form prependId="true">
<div class="row">
<mp:input icon="mdi-action-account-circle" id="login_field" label="Login" value="#{userBean.dtoUser.login}">
<f:validator validatorId="notNullValidator" />
<f:validateBean binding="#{loginValidator}" />
<f:attribute name="passwordValue" value="#{passwordValue}" />
</mp:input>
<mp:input icon="mdi-action-https" id="password_field" label="Password" value="#{userBean.dtoUser.password}"
binding="#{passwordValue}" required="true" />
<mp:button icon="mdi-content-forward" value="Login" action="#{userBean.login}" />
<mp:button immediate="true" icon="mdi-social-person-add" value="Sign Up" flat="true" action="registration" />
</div>
</h:form>
</div>
</h:body>
</html>
This is page after accepting login
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:mp="http://primefaces.org/ui/material" xmlns:p="http://primefaces.org/ui"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<h:head>
<title><ui:insert name="title" /></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png" />
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Material Design Lite" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png" />
<meta name="msapplication-TileColor" content="#3372DF" />
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<h:outputStylesheet library="css" name="material.min.css" />
<h:outputStylesheet library="css" name="styles.css" />
<h:outputScript library="js" name="material.min.js" />
</h:head>
<h:body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<h:graphicImage name="images/user.jpg" styleClass="demo-avatar" />
<div class="demo-avatar-dropdown">
<span><h:outputText value="#{userBean.user.login}" /> </span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i> <span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello#example.com</li>
<li class="mdl-menu__item">info#example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content">
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" /> -->
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
font-size="0.2" dy="-0.07">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1"
class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan
dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
</div>
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
<h2 class="mdl-card__title-text">Updates</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">Non dolore elit adipisicing ea reprehenderit consectetur
culpa.</div>
<div class="mdl-card__actions mdl-card--border">
Read More
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div
class="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
<h3>View options</h3>
<ul>
<li><label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox1" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Click per object</span>
</label></li>
<li><label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox2" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Views per object</span>
</label></li>
<li><label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox3" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Objects selected</span>
</label></li>
<li><label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input type="checkbox"
id="chkbox4" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Objects viewed</span>
</label></li>
</ul>
</div>
<div class="mdl-card__actions mdl-card--border">
Change location
<div class="mdl-layout-spacer"></div>
<i class="material-icons">location_on</i>
</div>
</div>
</div>
</div>
</main>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<mask id="piemask" maskContentUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.49" fill="white" />
<circle cx="0.5" cy="0.5" r="0.40" fill="black" />
</mask>
<g id="piechart">
<circle cx="0.5" cy="0.5" r="0.5" />
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250"
style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3" />
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10"
points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 " />
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10"
points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 " />
</g>
</g>
</defs>
</svg>
</div>
</h:body>
</html>

d3.js not being referenced property in HTML

I currently have the following html.
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
</body>
</html>
For some odd reason when I open the html. I don't get the simple results I expect. Anyone have idea why?

The problem is that the script is running before the dom is loaded. There are a couple of fixes, the simplest being to move the script to the end of the body.
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</body>
</html>
http://jsfiddle.net/46r21pn1/

svg clip image and show stroke

Hi I am new on this site so please forgive me if i am not clear about what i am trying to do
My Question is:-
I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped
Also I wish to add stroke width and color to the polygon shape
The SVG code that i am using:-
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath ID="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" />
</a>
</svg>
The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden
But somehow I tried various things but still i am not able to display stroke/border.
My question is how to display the border/stroke on a polygon shape that is used to clip an image
Thanks in advance

At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">
Second, just duplicate your path in order to use is as regular shape.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath id="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Alternatively, you can define you path as a shape and just refer to its name afterwards:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
<path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
<g>
<clipPath id="SVGID_1_">
<use xlink:href="#myPath" x="0" y="0"/>
</clipPath>
<use xlink:href="#myPath" x="0" y="0"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Check out this doc.

Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way.
To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.

Resources