I'm trying to export an SVG with some MySQL data (images, text) but i'm really having some trouble here.
The basic : I'm doing a circle, divided in 7 parts, where I want to put a logo + some text inside each part.
Result needed :
I figured out that SVG Crowbar was the ultimate way to export them.. Though, as i'm using some server-stored images, when the export is done, no images are rendered :
This is how I display data in each part :
<image x="270" y="50" xlink:href=/management-rings/web/assets/logos_bc/logo_ange.png height="75" width="75"/>
<foreignObject x="160" y="140" width="140" height="75">
<div style="height: 75px; width: 140px; position: absolute; z-index: 8; text-align: center;">
<p xmlns="http://www.w3.org/1999/xhtml" id="text">
ANGE<br>
</p>
</div>
</foreignObject>
I'm pretty much clueless right now. How to render properly these images when exporting the svg?
Thank you very much!
Related
I am using basiclightbox to show text from an external txt file.
It works, but I can't apply styles and size to the result.
I've done this:
document.querySelector('button.html1001').onclick = () => {
basicLightbox.create(`
</div>
<h1><p>
<object data="test.txt"></object>
</p></h1>
</div>
`).show()
}
and
<h1><p>
<object data="test.txt"></object>
</p></h1>
and tried including styles in the text file, but this is the result of the popup:
<h1><p> <br><br><br>
<br>
Testing text for testing
<br>
</p><h1>
It pops up with a black background and no style applies to the text.
Anyone have any ideas how to apply styles and background color to this?
Thanks in advance.
Figured it out.
$(document).ready(function() {
$("#obj").width($("#cont").width());
$("#obj").height($("#cont").height());
});
div#cont {
height: 600px;
width: 900px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont">
<object id="obj" width="400" height="400" data="test.html">
</object>
<div>
Figured it out, was a style problem was problem with the lightbox code.
Have the code working with just:
<object data="test.html">
But I still can't figure out how to change the size of the popup box.
Tried a bunch of stuff:
<object data="test.html" width="400" height="400">
and
<div id="cont">
<object id="obj" width="" height="" data="test.html"></object>
<div>
and
<div>
<object width="600" height="900" data="test.html"></object>
<div>
CSS
div {
height:600px;
width:900px;
}
and some others, no luck.
my case is that i use <svg><rect> for border, this is the code
<div class="dotted w-440">
<svg class="Rectangle_1184 w-440 h-340">
<rect id="Rectangle_1184" class=" w-440 h-340"></rect>
</svg>
<div class="flex-col-center upload h-340">
buttons and spans....
</div>
</div>
css:
.dotted{position: relative;margin: auto;padding: 8px 0;}
.h-340{height: 335px;}
.w-440{width: 440px;}
.Rectangle_1184{position: absolute;top: 23px;left: 0;}
#Rectangle_1184 {fill: transparent;stroke: rgba(68,73,89,0.502);stroke-dasharray: 6 6;stroke-width: 3px;}
when i try to click on a button i cant, since the selectable element is onl the svg, z-index not working, how can i "move" the div content in-front of the svg?
i found a solution, i need to draw another svg inside the div like this
<div class="flex-col-center upload h-340">
stuff....
<div class="flex-col-center group-2">
inner stuff....
<svg class="svg-btn"><rect class="svg-btn"></rect></svg>
</div>
</div>
css
.svg-btn{position: absolute; width: 1px; height: 1px;}
EXPLAINATION
with svg's, the browser draws them one upon the other, so once i have another svg inside the inner elements it draws them on the big svg
I'm trying to embed some font-awesome icons within a D3 visualization which is using SVG. I've found some solutions that get me part of the way such as:
How do I include a font awesome icon in my svg?
Adding FontAwesome icons to a D3 graph
These are a great starting point but seem to only work with a basic character. What I'd like to do however is use some of the font-awesome stacking features to make composite icons. Has anyone ever tried to do this before in SVG? Or is this simply not going to be possible?
When I've tried to put an example together, I've had to include the characters in 2 different text elements (I really wanted them inside one) and I feel like I'm now in a whole world of pain with regards to manually sizing or positioning myself. Does anyone have a possible resolution on how this might be achievable?
I've included where I've got to so far, red being the desired output, green being the SVG.
span {
border: thin solid red;
}
svg {
border: thin solid green;
}
text {
fill: black;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
<svg width="100" height="100">
<text x="50" y="50"></text>
<text x="50" y="50""></text>
</svg>
If you look at the css of fa-stack-1x and fa-stack-2x, you'll see that there is some "manual" positioning going on. You can translate those into valid SVG. On the "outer" stack:
text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"
And inner stack:
text-anchor="middle" alignment-baseline="middle"
Produces:
span {
border: thin solid red;
}
svg {
border: thin solid green;
}
text {
fill: black;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
<svg width="100" height="100">
<text x="50" y="50" text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"></text>
<text x="50" y="50" text-anchor="middle" alignment-baseline="middle" ></text>
</svg>
I have an embedded SVG with dynamic content inside, which may grow in all directions.
This content may be grow bigger than the fix sized container around.
My expected behavoir is, to show scrollbars, if any element inside the SVG needs more place than the container provides.
See the following simplified example:
<html>
<head>
</head>
<body>
<div style="overflow: auto; position: absolute; top: 60px; left: 60px; background-color: gray; height: 200px; width: 300px;">
<svg style="height: 190px;">
<rect x="-50" y="0" width="100" height="50" fill="red"></rect>
</svg>
</div>
</body>
</html>
What is the way to do this?
Is it really true, there is no concept in SVG to support such behavoir?
Any suggestions how to do it right "by hand"?
Svg does'nt support auto resizing to inside elements of itself.
So, you should resize manually the svg graphic to be able to scroll by outer svg element.
var svg = document.querySelector("svg");
var bbox = svg.getBBox();
svg.setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height]);
svg.width.baseVal.valueAsString = bbox.width;
svg.height.baseVal.valueAsString = bbox.height;
This seems like it ought to be easy, but I'm just not getting something.
I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.
For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally). If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).
Currently I have it defined like so:
<body style="height: 100%">
<div id="content" style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewBox="0 0 1024 768"
preserveAspectRatio="xMidYMid meet">
...
</svg>
</div>
</body>
However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.
What am I missing?
How about:
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }
Or:
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }
I have an example on my site using (roughly) this technique, albeit with 5% padding all around, and using position:absolute instead of position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml
(Using position:fixed prevents a very edge-case scenario of linking to a sub-page anchor on the page, and overflow:hidden can ensure that no scroll bars ever appear (in case you have extra content.)