I have this string of xml data coming from the database.
var svgString = '
<defs>
<clipPath id="path-print-area-path">
<path d="M767.5,474.5h-575a50,50,0,0,1-50-50V99.5a50,50,0,0,1,50-50h575a50,50,0,0,1,50,50v325A50,50,0,0,1,767.5,474.5Z" fill="transparent"></path>
</clipPath>
<clipPath id="path-top-FrontEdge">
<path d="M817.5 512 142.5 512 142.5 500 480 500 817.5 500 817.5 512Z" fill="#FF0000"></path>
</clipPath>
</defs>
<g id="Content" clip-path="url(http://maus.com/builder/2/14#path-print-area-path)" style="display: block;">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/link-to-image.png" x="164" y="40" width="258" height="213" class="" style="cursor: move;"></image>
<g id="Content-Text">
<text font-family="calibri" font-size="45pt" fill="#FF0000" x="480" y="252" style="cursor: move;">
<tspan style="basline-shift: 45;">Maus</tspan>
</text>
<text font-family="calibri" font-size="18pt" fill="#FF0000" x="480" y="277" style="cursor: move;">
<tspan style="basline-shift: 18;">Master Chief</tspan>
</text>
</g>
</g>';
I have tried to get it into my view by using the ngBindHtml directive that angular provides like so: (ng-bind-html="item.SVG").
<svg ng-bind-html="item.SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 560">
</svg>
When I do this it takes out everything that I need to make the svg work like the clip-path element and attribute. example below:
<svg ng-bind-html="x.Item.SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 560">
<defs>
<!-- this is suppose to have <clip-path id="path-print-area-path"> -->
<path d="M767.5,474.5h-575a50,50,0,0,1-50-50V99.5a50,50,0,0,1,50-50h575a50,50,0,0,1,50,50v325A50,50,0,0,1,767.5,474.5Z" fill="transparent">
</path>
<!-- </clip-path> -->
<!-- this is suppose to have <clip-path id="path-top-FrontEdge"> -->
<path d="M817.5 512 142.5 512 142.5 500 480 500 817.5 500 817.5 512Z" fill="#FF0000">
</path>
<!-- </clip-path> -->
</defs>
<g id="Content"> <!-- this is suppose to have these attributes; clip-path="url(http://maus.com/builder/2/14#path-print-area-path)" style="display: block;" -->
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/mm/Axomo/4179/users/FREDRICKJO/5_140732_4-dragon%20logo.png" x="164" y="40" width="258" height="213" class=""></image>
<g id="Content-Text">
<text font-family="calibri" font-size="45pt" fill="#FF0000" x="480" y="252">
<tspan>Maus</tspan>
</text>
<text font-family="calibri" font-size="18pt" fill="#FF0000" x="480" y="277">
<tspan>Master Chief</tspan>
</text>
</g>
</g>
</svg>
I am looking for a way to get ALL the information into the DOM to display my SVG correctly. I have google searched and searched all over SO and the closest I have come is the example above.
Please point me in the correct direction.
Use a combination of ngSanitize and $sce.trustAsHtml like this
app.controller("SVGController", ["$scope", "$sce", function($scope, $sce) {
$scope.item = {
TrustedSVG: $sce.trustAsHtml(svgString)
};
}]);
Fiddle: https://jsfiddle.net/codeandcloud/ew2y4pb0/
Related
I'm making a website where you can create your own character in order to learn more about SVGs. I want the user to be able to select different poses.
I was wondering how I could toggle the visibility of an SVG on the website to make one disappear and another appear.
Here is my SVG code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 720 720" style="enable-background:new 0 0 720 720;" xml:space="preserve">
<g id="skin">
<circle class="skin" cx="364.42" cy="383" r="278" />
</g>
<g id="mouth">
<path class="mouth" d="M172.92,383c127.67,0,255.33,0,383,0c0,105.05-86.45,191.5-191.5,191.5S172.92,488.05,172.92,383z"/>
</g>
<g id="hair">
<path class = "hair" d="M107.4,276.86c-2.76-50.59,10.76-81.24,24.2-100.13C189.57,95.31,331.92,112,341.92,57.91
c2.04-11.03-2.07-21.46-6.93-29.61c18.47-6.31,81.92-25.39,151.28,3.28c94.59,39.09,121.88,137.21,127.56,160.84
c7.93,32.98,7.18,61.32,5.46,79.42c-38.79-64.73-78.17-85.57-107.42-92.42c-43.32-10.15-60.72,11.26-139.64,11.71
c-67.77,0.39-78.13-15.27-119.49-10.14C216.75,185.45,165.19,204.69,107.4,276.86z"/>
</g>
<g id="eyes">
<g>
<circle class = "eyes" cx="251.17" cy="271.25" r="52.4"/>
<circle class = "eyes" cx="477.67" cy="271.25" r="52.4"/>
</g>
</g>
<g id="clothing">
<rect x="236.92" y="644.4" width="255" height="180"/>
</g>
<g id="tie">
<rect class="tie" x="341.82" y="653.68" transform="matrix(0.7071 0.7071 -0.7071 0.7071 584.9371 -59.6038)" class="st0" width="45.2" height="45.2"/>
<path class="tie" d="M364.95,927.93c-6.29-12.71-12.59-25.42-18.88-38.13c3.44-63.19,6.89-126.39,10.33-189.58
c5.1,0.25,10.2,0.49,15.29,0.74c4.13,62.75,8.25,125.49,12.38,188.24C377.7,902.11,371.32,915.02,364.95,927.93z"/>
</g>
</svg>
The SVG is just a sample right now before I make the actual assets.
Is it possible to convert the following polygon svg to a rectangular shaped. The internal pattern should also be converted along too. Also since this is a cutout of a bigger pattern, I am using feMorphology filter to show where the clipPath and what shape the clipPath is in.
XML
<svg id="SvgjsSvg1008" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1009">
<clipPath id="SvgjsClipPath1022">
<polygon id="SvgjsPolygon1015" points="131,55 131,218 90,280 5,235">
</polygon>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g transform="matrix(1,0,0,1,0,0)" clip-path="url("#SvgjsClipPath1022")">
<g filter="url("#dilate_shape")">
<polygon points="131,55 131,218 90,280 5,235" fill="blue" fill-opacity="0.5" clip-path="url("#SvgjsClipPath1019")"></polygon>
</g>
<g transform="matrix(1,0,0,1,0,0)" clip-path="url("#SvgjsClipPath1022")">
<image xlink:href="https://www.dropbox.com/pri/get/3574%20%5BConverted%5D.svg?_subject_uid=360738345&raw=1&size=1280x960&size_mode=3&w=AADi5fkmMPJI2i6WvcO3faWWR_30_D8f5IdWsJhFarM2JA" x="-75" y="-75" width="150" height="150" transform="matrix(1,0,0,1,109,185)"></image>
</g>
</g>
</svg>
</svg>
I want to assign a svg-mask to a svg-image. I can make this work using an id on the mask like this:
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<mask id="mask">
<circle cx="100" cy="100" r="100" fill="white"></circle>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)"></rect>
</svg>
However I want to load this svg multiple times, with a different id in the svg-tag. Therefore I will generate duplicates of the '#mask'-id. Using multiple id's is invalid code. So I want to use a class to refer to the appropriate mask. That means I cannot use the mask=url()-technique.
<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<mask class="mask">
<circle cx="100" cy="100" r="100" fill="white"></circle>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(can't use this)"></rect>
</svg>
Is there a way I can apply a mask to the rect element if the mask has a class instead of id? Maybe using javaScript or some other way I didn't think of.
The full story/context:
I am actually making an svg image slider-module for Joomla with php. This php generates a module containing javascript, css and an svg. I use the javascript to animate the mask.
I do actually have it working with unique id's. I was just wondering if there is a way to assign a mask to an element without referring to id's. I may want to do this because my code is getting a bit more confusing to read, because I have to use some php in my javascript/svg and css for each unique id.
No. You can only reference masks via an id. You cannot reference SVG masks any other way.
According to your description I understand you have a identical grafical entity you want to mask with different forms, multiple times. Write that down DRY:
<!-- start with an invisible svg that only contains mask definitions -->
<svg width="0" height="0"
xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- first, you have a circular mask -->
<mask id="circle-mask">
<circle cx="100" cy="100" r="80" fill="white" />
</mask>
<!-- then, you have a different mask, lets say a diamond -->
<mask id="diamond-mask">
<polygon points="100,20 180,100 100,180 20,100" fill="white" />
</mask>
</defs>
</svg>
<!-- further into your document, you want to mask a rectangle -->
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<!-- reference the circle mask -->
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>
<!-- with the circle again, as often as you want, nothing changes -->
<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<!-- the mask is the same, so no difference to above -->
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>
<!-- and now with the diamond; that one is different -->
<svg id="svg3" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<!-- if the mask changes, you need to change the reference -->
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#diamond-mask)" />
</svg>
You could also reference the masks in a stylesheet and give your referencing elements a class according to the mask shape:
.masked.circular rect {
mask: url(#circle-mask);
}
.masked.diamond rect {
mask: url(#diamond-mask);
}
<svg width="0" height="0"
xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="circle-mask">
<circle cx="100" cy="100" r="80" fill="white" />
</mask>
<mask id="diamond-mask">
<polygon points="100,20 180,100 100,180 20,100" fill="white" />
</mask>
</defs>
</svg>
<svg id="svg1" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="200" fill="red" />
</svg>
<svg id="svg2" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="200" fill="red" />
</svg>
<svg id="svg1" class="masked diamond" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="200" fill="red" />
</svg>
I have an SVG that had to have text centred both horizontally and vertically.
I would have pasted an image but don't have enough rep points. You can see the graphic at
https://www.dropbox.com/s/tt9ayqr0xugr4m9/link_example.png?dl=0
I need the white around the text to go grey (#eeeeee) when you hover over it. I got that with some simple CSS. I even got it with jQuery and some SVG but the issue is that when you hover over the word about (which needs to stay black all the time), the grey goes back to white as the text is over the circle and cancels the hover. I have been trying for hours and hours to fix this.
My code is:
<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 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<!-- gradient information -->
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
<stop offset="0" style="stop-color:#ED7625"/>
<stop offset="1" style="stop-color:#CF202F"/>
</linearGradient>
<a xlink:href="about.php">
<!-- gradient -->
<circle class="gradient-outer" fill="url(#SVGID_1_)" cx="50" cy="50" r="50"/>
<g class="svg-button_1">
<!-- white overlay -->
<circle id="#svg-text_1" class="white-inner" cx="50" cy="50" r="46" stroke="black" stroke-width="0" fill="white" />
<!-- text element -->
<text x="50%" y="50%" dy=".3em" text-anchor="middle">About</text>
</g>
</a>
Any help would be appreciated and I have tried many numerous ways with HTML/CSS/jquery to do it but it also have to be a link, scalable, ratio locked and responsive. (GROAN!!!)
JSBin
The jsbin has your required code. The issue you are facing is because
Text is not inside circle. Create a svg group and make that effect on
the svg group
2>One more point is dont give your id as # i.e <circle
id="#svg-text_1" should be <circle id="svg-text_1"
.svg-button_1:hover #svg-text_1{
fill: grey;
}
SVG is as below
<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 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<!-- gradient information -->
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
<stop offset="0" style="stop-color:#ED7625"/>
<stop offset="1" style="stop-color:#CF202F"/>
</linearGradient>
<a xlink:href="about.php">
<!-- gradient -->
<circle class="gradient-outer" fill="url(#SVGID_1_)" cx="50" cy="50" r="50"/>
<g class="svg-button_1">
<!-- white overlay -->
<circle id="svg-text_1" class="white-inner" cx="50" cy="50" r="46" stroke="black" stroke-width="0" fill="white" />
<!-- text element -->
<text x="50%" y="50%" dy=".3em" text-anchor="middle">About</text>
</g>
</a>
Any ideas when Firefox is likely to implement lengthAdjust andtextLength?..... i am working svg application. lengthAdjust and textLength working fine in chrome but not working in fire fox .
<svg viewBox = "0 0 500 300" version = "1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<g>
<text font-size = "20">
<textPath xlink:href="#s3" textLength="205">
Short text</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</g>
</svg>
This is implemented in Firefox but only for text elements (not for textPath or tspan) in this case that's OK though as you can just move the attribute to the text element.
<svg viewBox = "0 0 500 300" version = "1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<g>
<text font-size = "20" textLength="205">
<textPath xlink:href="#s3">
Short text</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</g>
</svg>
There is a bug for textPath/tspan support open should you wish to contribute to extend it.