I have written a small sample in which I have included svg file my code is below
<svg id="cityBox" width="600" height="400">
<text x="300" y="50" font-family="sans-serif" font-size="36" text-anchor="middle"
stroke="#000000" fill="#000000">
Survivng the Zombie
</text>
<image id="human" x="250" y="175" width="50" height="50" xlink:href=image1.svg/>
</svg>
On browsing the web page I see is below
The svg image is still not coming and showing an image break icon.
What is wrong that I am doing here?
Related
Wanting to make a logo, I started playing with SVG, and stuck trying to figure out how to use a Google Fonts family in a mask definition. If you want to reproduce, try loading the following .svg contents up in Google Chrome 85. The font loads fine for the second text element, but the first one (used in #mask) fails and defaults to serif.
<svg version="1.1" baseProfile="full" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Dancing+Script:400');
</style>
<mask id="mask">
<rect x="0" y="0" width="256" height="256" stroke-width="0" fill="white" />
<text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
</mask>
</defs>
<circle cx="128" cy="128" r="128" stroke-width="0" fill="red" mask="url(#mask)" />
<text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
</svg>
It looks like this,
So yea. I mean, am I not supposed to refer to external font families in other definitions or something? Any way to get around this?
Here's a link to my codepen: https://codepen.io/Bryandbronstein/pen/QVaQpa
So basically what I have is an svg circle set as a clipPath element to cut my image into a circle. Then I want to curve my text around the circle, rather than it being in a straight line on top of my circular image, like this:
image with curved text
The thing is, I have this image to show off as my example because this code works in Firefox, but no other browser I could test. What gives?
Here's my code:
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<text x="390" y="-20" width="100">
<textpath id="homepageText" xlink:href="#curve">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
Just to clarify, I have moderate experience in HTML and CSS but very little in SVG. Thank you!
Use path insted of circle, and text-anchor + startOffset to center the text:
<svg x="0px" y="0px" width="350" height="300" viewBox="0 0 350 300">
<defs>
<path id="curve" d="M40,180c0-60.751,49.248-110,110-110c60.751,0,110,49.249,110,110"/>
</defs>
<text fill="black" class="curved-text">
<textPath xlink:href="#curve" text-anchor="middle" startOffset="50%">My homepage!</textPath>
</text>
</svg>
Working Codepen.
Using svg path tag we can achieve curved text. Below is the modification to your code. Corrected x and y for text tag and have added path with id "forText.
<svg height="300" width="350">
<defs>
<clipPath id="circleView">
<circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
</clipPath>
</defs>
<path id="forText" d="M32,110, C25,90, 180,-39,290,130" stroke="" fill="none"/>
<text x="0" y="35" width="100">
<textpath xlink:href="#forText">
My Homepage!
</textpath>
</text>
<image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>
This is the code i have so far but it's not good
<svg
width="200"
height="13">
<g
id="layer1">
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>
</g>
</svg>
i am trying to get the text to fit perfectly in the box and etc. also need to add a background color to it.
This can serve:
<svg
baseProfile="full"
width="200"
height="13">
<g id="layer1">
<rect width="100%" height="100%" fill="red" />
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>
I have an <image> inside of an <svg> that is not displaying. I have checked the SVG spec and several SVG demos. This code should work, but the image does not appear. Any ideas?
<svg width="415" height="240">
<g transform="translate(115, 0)">
<image href="img/test.png" width="143" height="15" x="0" y="0"></image>
</g>
</svg>
The image href URL is correct :)
You are missing xlink
<image xlink:href="img/test.png" width="143" height="15" x="0" y="0"></image>
I have done a table in SVG, and I want to fill it with data dynamically. That means that I don't know how much space the text takes, and I want to clip or hide the overlapping text. How can I do that in SVG?
My HTML document with SVG looks like:
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text> <text x="160" y="100">12</text>
<text x="100" y="115">Pear</text> <text x="160" y="115">7</text>
<text x="100" y="130">Banana</text> <text x="160" y="130">9</text>
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text>
<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
</svg>
</body>
</html>
And this will render to:
Is there any way I can clip the text i my SVG-"table"?
Implemented solution from Erik's answer:
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="10" y="20" clip-path="url(#clip1)">Orange</text>
<text x="10" y="35" clip-path="url(#clip1)">Pear</text>
<text x="10" y="50" clip-path="url(#clip1)">Banana</text>
<text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text>
<text x="70" y="20">12</text>
<text x="70" y="35">7</text>
<text x="70" y="50">9</text>
<text x="70" y="65">2</text>
<line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/>
<clipPath id="clip1">
<rect x="5" y="5" width="57" height="90"/>
</clipPath>
</svg>
</body>
</html>
You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite.
Relevant parts, defining the clip path:
<clipPath id="clip1">
<rect x="200" y="10" width="60" height="100"/>
... you can have any shapes you want here ...
</clipPath>
and then apply the clip path like this:
<g clip-path="url(#clip1)">
... your text elements here ...
</g>
If for some reason you don't want to use clipping, you can also use a nested SVG tag:
<svg>
<svg x="10" y="10" width="10" height="10">
<text x="0" y="0">Your text</text>
</svg>
</svg>
This way, your text will be cut off when it's outside the nested SVG viewport. Note that the x and y of the text tag refer to the coordinate system of the nested SVG, and correspond to 10 in the coordinate system of the outer SVG.
As Marcin said in point (2) of his answer (unfortunately downvoted but actually this is a good point) an alternative way to achieve the effect is to overpaint the part not wanted with a white rectangle.
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text>
<text x="100" y="115">Pear</text>
<text x="100" y="130">Banana</text>
<text x="100" y="145">Pomegranate</text>
<!-- Overpaint the overflowing text -->
<rect x="155" y="85" width="100" height="100" fill="white" />
<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
<text x="160" y="100">12</text>
<text x="160" y="115">7</text>
<text x="160" y="130">9</text>
<text x="160" y="145">2</text>
</svg>
</body>
</html>
Reference to the SVG specification: SVG 2.0 Rendering Order
(1) There is no reason to use SVG for tables. Use HTML tables.
(2) By "clipping" I understand you to mean that the excess text will be obscured. SVG uses a "painter's model" whereby elements specified later in the document are drawn above elements specified earlier. This will allow you to clip regions.
(3) If you really needed to do this in an SVG document you could use a foreign object, and embed HTML.
If you don't want to use a clip-path, which can be a pain if each element has a different size, then you can also use nested <svg> elements for clipping. Just make sure the svg elements have the CSS style overflow:hidden.
<!DOCTYPE html>
<html>
<body>
<svg>
<svg width="57" height="15" x="10" y="5"><text y="15">Orange</text></svg>
<svg width="57" height="15" x="10" y="20"><text y="15">Pear</text></svg>
<svg width="57" height="15" x="10" y="35"><text y="15">Banana</text></svg>
<svg width="57" height="15" x="10" y="50"><text y="15">Pomegranate</text></svg>
<text x="70" y="20">12</text>
<text x="70" y="35">7</text>
<text x="70" y="50">9</text>
<text x="70" y="65">2</text>
<line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/>
</svg>
</body>
</html>