Is it possible to justify SVG text using d3js? - d3.js

I'm wrapping text using M.Bostock's wrap function but can't find a way to justify it.
Is that even possible in d3 ?
If not, is there a way to "mimic" this kind of text disposition ?
EDIT: Thanks to Logikos suggestion, i've found this example from M.Bostock putting a foreignObject inside svg.
Here is the snippet:
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.append("foreignObject")
.attr("width", 480)
.attr("height", 500)
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html("<h1>An HTML Foreign Object in SVG</h1><p>Veeery long text");
Then you just need to add in the CSS:
body {text-align: justify;
text-align-last: start;
}


It is not exactly what your looking for but something I used several years ago. Instead of using that function to mimic wrapping you can instead put html inside svg with the foreignObject tag - http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg
As html you can style it however you want, text wrapping, justified etc etc.
I have not worked with d3 or SVG's in over 5 years so it is difficult to remember but thought I'd share this in-case it was of any use.
This is the example markup from the link I posted above:
< ?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="150" fill="gray"/>
<foreignobject x="10" y="10" width="100" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
</body>
</foreignobject>
<circle cx="200" cy="200" r="100" fill="blue" stoke="red"/>
<foreignobject x="120" y="120" width="180" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<ul>
<li><strong>First</strong> item</li>
<li><em>Second</em> item</li>
<li>Thrid item</li>
</ul>
</div>
</body>
</foreignobject>
</svg>
Please note browser support: http://caniuse.com/#search=foreignObject
Which says it will work in everything other than opera mini. Though there are some limitations in IE and Edge:
1 IE11 and below do not support . 2 IE and Edge do not
support applying SVG filter effects to HTML elements using CSS.
You should check it in IE and Edge, in one place the site says it does not support it, in another it says it supports it somewhat...

Related

Correct way of changing svg image in svelte

In svelte, I have the option of switching between two images, or using css to change the color of the svg image. Which is "better/ best practice"? (also we use tailwind css).
<div class='w-2 h-2'>
{#if condition}
<Image1/> <--white image
{:else}
<Image2/> <--red image
{/if}
</div>
OR
If the default image is white, this passes red to it. The color variable would be text-red or text-white based on some condition.
<div class='w-2 h-2 ${color}'>
<Image1/>
</div>

Svelte's reactivity can take over colour conditions via CSS. We can avoid the if condition.
App.svelte
<script>
import Icon from "./Icon.svelte"
let stroke = "green";
function changeStroke(){
stroke = "red"
}
</script>
<Icon {stroke}/>
<button on:click={changeStroke}>Change</button>
Icon.svelte
<script>
export let stroke = 'white';
</script>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {stroke} stroke-width="2">
<!-- Big SVG -->
</svg>
See this example REPL

Center D3 Piechart in the center of a div, respecting it's dimensions

I'm having some difficulties with centering a piechart I created in D3 in it's parents div. I've set up a JS-fiddle right here: https://jsfiddle.net/86czgLnu/
The problem is that it overflows it's parents dimensions and I want it to scale to fit and be in the center of the parent. I found documentation about preserveAspectRatio and viewBox but wasn't able to fix it with those.
All the code is in the fiddle
Thanks for having a look.

Unfortunately, you can't use percentages inside translate. The best idea would be using JS (D3, in your case) to get the size of the container and translate the group appropriately, by half its width.
Here is your SVG with absolute values for the translate:
<div class="js-graph ct-chart">
<svg width="100%" height="100%">
<g transform="translate(50,50) scale(0.2)">
<path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
<path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
<path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
</g>
</svg>
</div>
An alternative to simulate a translate by percentage is using an inner SVG, as described in this answer by Robert Longson. However, it won't work, because the pie chart is drawn at the origin:
<div class="js-graph ct-chart">
<svg width="100%" height="100%">
<svg x="50%" y="50%">
<g transform="scale(0.2)">
<path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
<path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
<path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
</g>
</svg>
</svg>
</div>
PS: scale is part of the "transform" attribute.

Image mask in Mozilla + foreignObject + Ajax

http://continent-news.info/page_20.html
In the left column of news, they opens in a popup window, and loaded with Ajax.
<div class="ukraine_mask1">
<svg height="116px" width="142px">
<defs>
<mask id="ukraine_mask1" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<image xlink:href="mask/ukraine_mask1.png" height="116px" width="142px">
</mask>
</defs>
<foreignObject class="recov_ukraine_mask1" style="mask: url(#ukraine_mask1);" height="100%" width="100%">
<div class="element_mask mask1_ukraine">
<img src="../inf_images/small/7812_8926.jpeg">
</div>
</foreignObject>
</svg>
</div>
problem in Mozilla:
Some news used map with a mask, the first time the mask works well. But if I click another news with mask, they does not want to re-use mask... =( If I press again the first news, it will work.
The second time, does not want to re-use =(
If in firebug disable / apply
mask: url ("# ukraine_mask1")
in
foreignObject class = "recov_ukraine_mask1"
it will work again ...
Maybe someone have an idea how to solve this problem?
I tried to add a simple style in СSS, but does not help = (

Text not being rendered in Base64 encoded SVG

I'm rendering an SVG image using
<img src="data:image/svg+xml;charset=utf-8;base64," + src />
where src is the Base64 encoded SVG image. Everything in the picture displays correctly except for the text in the fields which are not displayed at all. This problem exists in Chrome, but not in Internet Explorer. Any ideas on how to get around this problem?
If I right-click on the displayed picture, download it and view it in Linux's Image Viewer, the text shows up perfectly again.
Edit: Example of SVG image:
<svg width="700" height="220" title="test2" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>

In my case was a problem, that a have created <text> as document.createElement('text') and the svg result looked like this:
<svg xmlns="http://www.w3.org/2000/svg">
<text xmlns y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>
And after encoded to base 64 using window.btoa() the text also not being rendered.
In my case the reason was in an empty xmlns attribute in text tag.
Solution: I have created element using document.createElementNS('http://www.w3.org/2000/svg', 'text'). It creates an element with the specified namespace URI and qualified name.

firefox img rounded borders without using div background

It's a known bug that -moz-border-radius doesnt work on images in firefox. What's a way to get this functionality without resorting to putting the image as a background on a rounded div?

In current Firefox you can use SVG filters. Have an SVG file clip.svg like this:
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
</svg:clipPath>
</svg:svg>
And apply it in CSS like this:
.target { clip-path: url(clip.svg#c1); }

Resources