I am currently running into an issue relating to adding page breaks when my html file renders into a pdf.
Currently, I have a function that generates a scatterplot with the format below:
function createScatterplot(row, column, group) {
## any d3 visualization code goes here
}
By calling:
createScatterplot(feature1, feature2, 'a')
createScatterplot(feature2, feature3, 'a')
createScatterplot(feature1, feature3, 'b')
it will generate three scatterplots using the d3.js library. Is there an easy way to add page breaks so that we get the following output:
createScatterplot(feature1, feature2, 'a')
createScatterplot(feature2, feature3, 'a')
<--- Page break here --->
createScatterplot(feature1, feature3, 'b')
where each page break is determined by the group (third parameter of the function)?
I know that the function createScatterplot generates an SVG object, but when attempting to use the existing solutions for page breaks in CSS, it seems that the creation of the svg object follows after the execution of the page breaks.
Ideally, I wouldn't want to use any additional JS library. Thanks!
As far as I know, SVG does not do page breaks, but here is a link to an approach that may work for you: https://codepen.io/AmeliaBR/details/jKxJz/
The idea is "re-using the same graphic within multiple SVG elements, using the viewBox attribute to define which part of the graphic should be visible each time". It's a little complicated, but if you look at the codepen, pay attention to the css, especially the "screen styles" part, you can get it to work. Here's a somewhat abridged version - in Chrome (haven't tested with others) when you Print the page it divides it into 4 page-sized blocks...
<head>
<meta charset="utf-8">
<title>paginate</title>
<style>
figure.svg-container {
display: block;
overflow: scroll;
max-width: 90vw;
max-height: 90vh;
border:gray solid thin;
}
svg.print {
display: none;
}
#media print {
figure.svg-container {
display: inline;
overflow: auto;
border: none;
}
svg.screen {
display: none;
}
svg.print {
overflow: hidden;
border: thin lightgray solid;
padding: 0.5em;
-moz-box-sizing: border-box;
box-sizing: border-box;
page-break-inside: avoid;
break-inside: avoid;
}
}
#media print and (orientation: landscape){
svg.print.landscape {
display: block;
height: 7in;
width: 10in;
}
}
</style>
</head>
<body>
<figure class="svg-container">
<svg class="screen" width="18in" height="12in" viewBox="0 0 1800 1200">
<g id="graphic"></g>
</svg>
<!-- For printing in landscape mode, the graphic is divided into four
overlapping quadrants which will each fit on a letter/A4 page without scaling.
The 1000*700 viewBox is equivalent to 10in*7in of the onscreen dimensions. -->
<svg class="print landscape" viewBox="0 0 1000 700">
<use xlink:href="#graphic" />
<defs>
<symbol id="arrow-left" overflow="visible"
viewBox="0 0 12 12"
preserveAspectRatio="xMinYMid meet">
<!-- left-pointing block arrow pointing to 0,0 point -->
<path class="arrow" d="M0 0L5 -5, 5 -3, 12 -3, 12 3, 5 3, 5 5Z" />
</symbol>
<symbol id="arrow-right" overflow="visible"
viewBox="0 0 12 12"
preserveAspectRatio="xMinYMid meet">
<!-- right-pointing block arrow pointing to 0,0 point -->
<path class="arrow" transform="rotate(180)"
d="M0 0L5 -5, 5 -3, 12 -3, 12 3, 5 3, 5 5Z" />
</symbol>
<symbol id="arrow-top" overflow="visible"
viewBox="0 0 12 12"
preserveAspectRatio="xMinYMid meet">
<!-- top-pointing block arrow pointing to 0,0 point -->
<path class="arrow" transform="rotate(90)"
d="M0 0L5 -5, 5 -3, 12 -3, 12 3, 5 3, 5 5Z" />
</symbol>
<symbol id="arrow-bottom" overflow="visible"
viewBox="0 0 12 12"
preserveAspectRatio="xMinYMid meet">
<!-- bottom-pointing block arrow pointing to 0,0 point -->
<path class="arrow" transform="rotate(-90)"
d="M0 0L5 -5, 5 -3, 12 -3, 12 3, 5 3, 5 5Z" />
</symbol>
</defs>
<g class="labels">
<text class="label" x="50%" y="50%">A</text>
<use xlink:href="#arrow-right" x="100%" y="50%" width="100" height="100" />
<text class="pointer right" x="100%" y="50%" dx="-50">B</text>
<use xlink:href="#arrow-bottom" x="50%" y="100%" width="100" height="100" />
<text class="pointer bottom" x="50%" y="100%" dy="-50">C</text>
</g>
</svg>
<svg class="print landscape" viewBox="800 0 1000 700">
<use xlink:href="#graphic" />
<g class="labels" transform="translate(800,0)">
<text class="label" x="50%" y="50%">B</text>
<use xlink:href="#arrow-left" x="0%" y="50%" width="100" height="100" />
<text class="pointer left" x="0%" y="50%" dx="50">A</text>
<use xlink:href="#arrow-bottom" x="50%" y="100%" width="100" height="100" />
<text class="pointer bottom" x="50%" y="100%" dy="-50">D</text>
</g>
</svg>
<svg class="print landscape" viewBox="0 500 1000 700">
<use xlink:href="#graphic" />
<g class="labels" transform="translate(0,500)">
<text class="label" x="50%" y="50%">C</text>
<use xlink:href="#arrow-right" x="100%" y="50%" width="100" height="100" />
<text class="pointer right" x="100%" y="50%" dx="-50">D</text>
<use xlink:href="#arrow-top" x="50%" y="0%" width="100" height="100" />
<text class="pointer top" x="50%" y="0%" dy="50">A</text>
</g>
</svg>
<svg class="print landscape" viewBox="800 500 1000 700">
<use xlink:href="#graphic" />
<g class="labels" transform="translate(800,500)">
<text class="label" x="50%" y="50%">D</text>
<use xlink:href="#arrow-left" x="0%" y="50%" width="100" height="100" />
<text class="pointer left" x="0%" y="50%" dx="50">C</text>
<use xlink:href="#arrow-top" x="50%" y="0%" width="100" height="100" />
<text class="pointer top" x="50%" y="0%" dy="50">B</text>
</g>
</svg>
<!-- For printing in portrait mode, the graphic is scaled down slightly
to fit on two pages. Again, the content of each page will overlap slightly. -->
<svg class="print portrait" viewBox="0 0 1000 1200">
<use xlink:href="#graphic" />
<g class="labels">
<text class="label" x="50%" y="50%">A</text>
<use xlink:href="#arrow-right" x="100%" y="50%" width="100" height="100" />
<text class="pointer right" x="100%" y="50%" dx="-50">B</text>
</g>
</svg>
<svg class="print portrait" viewBox="800 0 1000 1200">
<use xlink:href="#graphic" />
<g class="labels" transform="translate(800,0)">
<text class="label" x="50%" y="50%">B</text>
<use xlink:href="#arrow-left" x="0%" y="50%" width="100" height="100" />
<text class="pointer left" x="0%" y="50%" dx="50">A</text>
</g>
</svg>
</figure>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var doc = document;
var g = doc.getElementById("graphic");
var svgNS = g.namespaceURI;
var r, t;
for (var i=0; i<18; i++) {
for (var j=0; j<12; j++) {
r = doc.createElementNS(svgNS, "rect");
r.setAttribute("width", "80");
r.setAttribute("height", "80");
r.setAttribute("x", (i*100 + 10));
r.setAttribute("y", (j*100 + 10));
r.style.setProperty("fill-opacity", ((i*j + 1)%20)/20, null);
g.insertBefore(r, null);
t = doc.createElementNS(svgNS, "text");
t.setAttribute("x", (i*100 + 50));
t.setAttribute("y", (j*100 + 50));
t.setAttribute("class", "diagram");
t.textContent = [i,j];
g.insertBefore(t, null);
}
}
});
</script>
</body>
Related
React-Native-svg supports SVG pattern, however, I am not sure how to apply it...
When I try the minimal example from the documentation, I get a blanc screen, white screen.
<View
style={{paddingTop: 20,
height: '100%',
flex: 1,
backgroundColor: 'white'}}>
<Svg width="100%" height="100%" viewBox="0 0 800 400">
<Defs>
<Pattern
id="TrianglePattern"
patternUnits="userSpaceOnUse"
x="0"
y="0"
width="100"
height="100"
viewBox="0 0 10 10">
<Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
</Pattern>
</Defs>
</Svg>
</View>
Why is that?
As #Robert Longson pointed out in a comment below the Q. You need a shape (like a rect or ellipse) with the id given in the pattern.
<Svg width="100%" height="100%" viewBox="0 0 800 400">
<Defs>
<Pattern
id="TrianglePattern"
patternUnits="userSpaceOnUse"
x="0"
y="0"
width="100"
height="100"
viewBox="0 0 10 10"
>
<Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
</Pattern>
</Defs>
<Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
<Ellipse
fill="url(#TrianglePattern)" // make sure this is the id given in the pattern
stroke="black"
strokeWidth="5"
cx="400"
cy="200"
rx="350"
ry="150"
/>
</Svg>
I have an SVG icon like this:
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<rect width="19" height="19" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#image0" transform="scale(0.00444444)"/>
</pattern>
<image id="image0" width="225" height="225" xlinkHref="data:image/jpeg;base64,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"/>
</defs>
</svg>
It displays on screen width > 1279 but disappears from the screen width <= 1279. Because of the page's layout, I have three divs that render on different screen sizes and contain this svg. I tried using svgs with different ids but the same content. However, it didn't work for me. Can somebody help me with that?
logic code:
component that uses svg icons (all of them disappear on width <= 1279 except star svgs that rendered in a list)
<div className="position__reviews--social-wrapper">
<div className="position__reviews--social">
<Icon className="position__reviews--social-icon" name="google" />
<Icon className="position__reviews--social-icon" name="vivino" />
</div>
<div className="position__reviews--vivino-wrapper">
<Icon className="position__reviews--vivino-text-icon" name="vivino-text" />
{[...Array(5)].map((star,idx) => idx + 1 <= redStars ? <Icon className="position__reviews--star-red" name="position__review-star-red" /> : <Icon className="position__reviews--star-gray" name="position__review-star-gray" />)}
</div>
</div>
Icon (svgIcons is a list of jsx items: () => (<svg>...</svg>) ):
const Icon = ({ name, fill, onClick, className }) => {
const svg = svgIcons[name];
const iconClasses = cn(className, {
'icon--active': !!onClick,
});
return svg ? (
<span className={iconClasses} onClick={onClick}>
{svg(fill)}
</span>
) : null;
};
css:
.position__reviews--social-icon {
border: 1px solid #C4C4C4;
box-sizing: border-box;
border-radius: 3px;
margin-right: 6px;
padding: 4px;
padding-top: 9px;
padding-bottom: 1px;
cursor: pointer;
}
What happens:
width > 1279:
width <= 1279:
This:
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<rect width="19" height="19" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#image0" transform="scale(0.00444444)"/>
</pattern>
<image id="image0" width="225" height="225" xlinkHref="data:image/jpeg;base64,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"/>
</defs>
</svg>
was most likely created by a developer in a K-Hole
"Falling into a k-hole" is slang for how it feels when you take a high enough dose of ketamine that your awareness of the world around you and your control over your own body become so profoundly impaired that you're temporarily unable to interact with others—or the world around you.
It wraps a Base64 data (the Google G logo)
in an <image>
in a <pattern>
in a <rect>
in a <svg>
I would ask that developer what the meaning is, because all you have to do is:
wrap the Base64 data in an IMG element
<img width="19" src="data:image/jpeg;base64,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">
If you do want the contrived SVG, write proper SVG:
<svg width="19" height="19" viewBox="0 0 19 19">
<rect width="19" height="19" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use href="#image0" transform="scale(0.00444444)"/>
</pattern>
<image id="image0" width="225" height="225" href="data:image/jpeg;base64,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"/>
</defs>
</svg>
I am making and animation the objetive is change the xlink:href inside a SVG. (this is for change a shape), and change class respect to their position inside.
This is my SVG
<svg viewBox="-20 -20 600 200" id="main">
<defs id="test">
<rect width="80" height="80" id="circle" fill="red" class="first" />
<rect width="80" height="80" id="square" fill="pink" class="second" />
<rect width="80" height="80" id="cross" fill="blue" class="third" />
</defs>
<g id="load-area">
<use x="0" xlink:href="#circle" />
<use x="100" xlink:href="#square" />
<use x="200" xlink:href="#cross" />
</g>
</svg>
The class in every rectelement, has a different animation-delay according to position (first execute at 0s, second at 2s, third at 4s and so on).
With JS I change every <use> at #load-area
main.children['load-area'].children[0].setAttribute("xlink:href", getFigure(random()));
And it works, the shape changes but, suppose when it gets three times the id #cross then all elements have third CSS class.
I need change CSS class inside every children of <use>, How can I do that?
Below an element tree :
I get all <use> with: main.children['load-area'].children but it does not have child element, as I show u below:
You can solve this using CSS variables that you combine with nth-child selector and you no more need the classes.
Here is a basic example
rect {
animation:change 3s var(--d,0s) infinite;
}
#keyframes change {
0% {
opacity:1;
}
33%,100% {
opacity:0;
}
}
#load-area > use:nth-child(1) {--d:0s}
#load-area > use:nth-child(2) {--d:1s}
#load-area > use:nth-child(3) {--d:2s}
/*#load-area > use:nth-child(N) {--d:Xs}*/
<svg viewBox="-20 -20 600 200" id="main">
<defs id="test">
<rect width="80" height="80" id="circle" fill="red" />
<rect width="80" height="80" id="square" fill="pink" />
<rect width="80" height="80" id="cross" fill="blue" />
</defs>
<g id="load-area">
<use x="0" xlink:href="#circle" />
<use x="100" xlink:href="#square" />
<use x="200" xlink:href="#cross" />
</g>
</svg>
<svg viewBox="-20 -20 600 200" id="main">
<g id="load-area">
<use x="0" xlink:href="#square" />
<use x="100" xlink:href="#circle" />
<use x="200" xlink:href="#cross" />
</g>
</svg>
If the number is unknown or very big you can easily use a JS loop:
var e = document.querySelectorAll('#load-area use');
for(var i=0;i<e.length;i++) {
e[i].style.setProperty('--d',i+"s");
}
rect {
animation:change 3s var(--d,0s) infinite;
}
#keyframes change {
0% {
opacity:1;
}
33%,100% {
opacity:0;
}
}
<svg viewBox="-20 -20 600 200" id="main">
<defs id="test">
<rect width="80" height="80" id="circle" fill="red" />
<rect width="80" height="80" id="square" fill="pink" />
<rect width="80" height="80" id="cross" fill="blue" />
</defs>
<g id="load-area">
<use x="0" xlink:href="#circle" />
<use x="100" xlink:href="#square" />
<use x="200" xlink:href="#cross" />
</g>
</svg>
document.getElementsByTagName("use")[0].setAttribute("xlink:href", "#circle");
element.setAttribute(attributename, attributevalue)
Here is how you can change element attributes
I tried putting an image inside a polygon by using patterns, but it doesn't work. Is there any way to fill this?
<svg tabindex="1" style="width: 175px; height: 216.506px;">
<polygon points="25,0 75,0 100,43 75,86 25,86 0,43" class="hexfield" tabindex="1" hex-row="0" hex-column="0"></polygon>
<polygon points="100,44 150,44 175,87 150,130 100,130 75,87" class="hexfield" tabindex="1" hex-row="0" hex-column="1"></polygon>
<polygon points="25,87 75,87 100,130 75,173 25,173 0,130" class="hexfield" tabindex="1" hex-row="1" hex-column="0"></polygon>
<polygon points="100,130 150,130 175,173 150,216 100,216 75,173" class="hexfield" tabindex="1" hex-row="1" hex-column="1"></polygon>
<defs>
<pattern id="image1" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64">
<image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image>
</pattern>
</defs>
<use xlink:href=".hexfield" fill="yellow"/>
<use xlink:href=".hexfield" fill="url(#image1)"/>
</svg>
First of all, be aware that xlink:href is deprecated.
Second, xlink:href value doesn't use CSS syntax (where # means ID and . means class).
So, for referring to a group of SVG's, you should point xlink:href to the id of a tag <g>. But If you want that only one SVG gets the definitions, point xlink:href to the SVG id (not class):
<svg tabindex="1" style="width: 175px; height: 216.506px;">
<g id="hexfield">
<polygon points="25,0 75,0 100,43 75,86 25,86 0,43"/>
<polygon points="100,44 150,44 175,87 150,130 100,130 75,87"/>
<polygon points="25,87 75,87 100,130 75,173 25,173 0,130" id="another"/>
<polygon points="100,130 150,130 175,173 150,216 100,216 75,173"/>
</g>
<defs>
<pattern id="image1" height="100%" width="100%" viewBox="0 0 64 64">
<image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"/>
</pattern>
<pattern id="image2" height="100%" width="100%" viewBox="0 0 64 64">
<image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/iPhoto.png"/>
</pattern>
</defs>
<use xlink:href="#hexfield" fill="yellow"/>
<use xlink:href="#hexfield" fill="url(#image1)"/>
<use xlink:href="#another" fill="red"/>
<use xlink:href="#another" fill="url(#image2)"/>
</svg>
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/