I want to create a table with the table border using some repeating character say a $. I want the output to be like
$$$$$$$$$$$$$
$ $
$ asd $
$ $
$$$$$$$$$$$$$
I thought of using pseudo elements but that won't give the desired result.
Is there a way to achieve this using CSS3?
You can do it using svg
<svg width="500" height="500">
<defs>
<pattern id="p" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" >
<text x="0" y="30" font-size="40">$</text>
</pattern>
</defs>
<rect x="0" y="0" width="500" height="500" stroke="url(#p)" fill="none" stroke-width="100"/>
Related
I cannot get past 2 levels. (Tried on Iceweasel and Chromium.)
As a test, I tried a variant of the code presented in this earlier reply. This one consists of 3 separate files, where a.svg includes b.svg, and b.svg includes c.svg. (NB: This is not a cycle.)
<!-- a.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:#b58900" />
<image x="10" y="20" width="80" height="80" xlink:href="b.svg" />
</svg>
<!-- b.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:#cb4b16" />
<image x="10" y="20" width="80" height="80" xlink:href="c.svg" />
</svg>
<!-- c.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:#dc322f" />
</svg>
I expected to see a large dark yellow dot, a medium-sized orange dot, and a small red dot, but I see only the first two. In fact, what I see is exactly the same as what I would see if b.svg did not include c.svg.
Why is c.svg not being included?
Is there a way to get SVG recursion to work for more than 2 levels?
SVG when used as an image must be complete in a single file.
a.svg is not an image
b.svg is included as an image by a.svg and is therefore subject to the complete in a single file image rule so any images it contains must be included as data URIs.
c.svg is ignored as b.svg cannot refer to external files.
Convert c.svg to a data URI and include it inline in b.svg to get round this.
I have an SVG element that is composed of a shape and text. This element is replicated several times inside the SVG file and I wanted to take advantage of the symbol and use tags.
But I need to be able to pass values to update the text nodes inside the symbol as each symbol will have it's own value.
Is there a way to do this without Javascript?
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 800 800">
<defs>
<g id="Initials">
<circle id="bgColor" cx="200" cy="200" r="80" class="cls-9"/>
<text id="label" fill="white" font-size="50" transform="translate(170, 220)">
10
</text>
</g>
</defs>
<use href="#Initials" />
<use href="#Initials" x="200" y="0" />
</svg>
Created a simple SVG with an ellipse. I want that ellipse to get filled with an external image. It shows OK on Chrome on MacOS but on no other agent. What is wrong ?
Searched a lot of other questions here but none is helpful, it seems.
Codepen
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="100px" y="100px" viewBox="0 0 177.5 175" xml:space="preserve">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="100" y="1000" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
</pattern>
</defs>
<ellipse id="FillThisWithColorOrPattern" style="fill:url(#image)" stroke="#333333" stroke-miterlimit="10" cx="90" cy="87" rx="87.5" ry="82"/>
<circle id="Inner_1_" fill="#FF0000" cx="90" cy="87" r="35"/>
<path id="TextLine1_Path" fill=None
d="M90,137.5c-27.8,0-50.5-22.7-50.5-50.5S62.2,36.5,90,36.5s50.5,22.7,50.5,50.5S117.8,137.5,90,137.5z M90,37.5
c-27.3,0-49.5,22.2-49.5,49.5s22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5S117.3,37.5,90,37.5z"/>
<text>
<textPath xlink:href="#TextLine1_Path">
The quick brown fox jumps over the lazy dog.
</textPath>
</text>
</svg>
It seems that you have to specify a width and a height to your image for other browsers. I tried with Firefox 58 and Safari 11 on MacOS and the pattern is there.
<image x="0" y="0" xlink:href="http://i.imgur.com/7Nlcay7.jpg" width="200" height="200"/>
Here's your example updated: https://codepen.io/anon/pen/RJeMda
Also, note that xlink:href is deprecated since SVG 2. You should now use href. The MDN doc adds:
For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.
I am trying to render an SVG with 4000x4000 resolution.
The command I am using is:
rsvg --keep-image-data -w 4000 -h 4000 big.svg try.png
An svg sample is:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="406" height="406">
<clipPath id="slot-1">
<rect x="0" y="0" width="45" height="45" />
</clipPath>
<clipPath id="slot-2">
<rect x="0" y="203" width="45" height="45" />
</clipPath>
<image clip-path="url(#slot-2)" x="1" y="170" angle="0" width="80" height="45" preserveAspectRatio="none" xlink:href="file:///var/www/myposter/web/application/../../storage/public/2017/04/0/b/f/8/4/0bf841426d859a99b0736766eca9d353ad9c9fd2_base.jpg" />
<image clip-path="url(#slot-1)" x="1" y="-29" angle="0" width="76" height="45" preserveAspectRatio="none" xlink:href="file:///var/www/myposter/web/application/../../storage/public/2017/04/1/0/9/6/0/10960d9aa853b49dac548887595c829b32aa5107_base.jpg" />
</svg>
The images are from 2MB - 24MB of size.
And in the end the thing crashes and gives me back "Segmentation fault".
If I do the same with a resolution of 1200x1200...
rsvg --keep-image-data -w 1200 -h 1200 big.svg try.png
It works as expected.
The process simply hits the memory limit because there are a lot of high-res images referenced in the svg.
So the solution would be to get more memory or to use lower size images
Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?
I'm creating a browser-based tool that works in modern browsers.
Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.
I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:
But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:
Is this possible? Am I looking to have my cake and eat it too?
Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
And on the boundary if the stroke width is even.
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.
[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by #defghi1977 . +1 to him, by the way.]
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>
Produced
This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.