I tried to draw a shape using html/svg. It is a volume control, see below
<svg height="20" width="90" style="background-color: #ccc;">
<g>
<rect x="10" y="0" width="80" height="20" style="stroke: #000; stroke-width: 1; fill: #fff;"></rect>
<!-- Example two of four -->
<polygon points="10,20 50,10 50,20" style="fill: rgba(128,128,128,128)"></polygon>
<line x1="30" y1="0" x2="30" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="50" y1="0" x2="50" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="70" y1="0" x2="70" y2="20" style="stroke: #000; stroke-width: 1;"></line>
</g>
</svg>
All browsers draw the horzontal lines double width, except the last one. I even added "stroke-width: 1", but that doesn't work.
I guess anti-aliasing? How can I fix this?
Related
I need to generate multiple parallel connections from an original one, as shown in code:
Code:
<svg width="800" height="800">
<!-- one filter -->
<g transform="translate(50,50)">
<text y="50">Original</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,50)">
<text y="50">Generated</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L10,90 L100,90 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 20,0L20,80 L100,80 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(50,250)">
<text y="50">Original</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,250)">
<text y="50">Generated</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L20,80 L100,60 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
</svg>
https://codepen.io/anon/pen/wyObNr
Is there any easy way to do it? Something like cloning and just making it fit along the original one would be perf
regards
Svg provides the means for reuse of partial drawings with the defs element. It may contain groups (g element) that contain an arbitrarily complex scene. These may be referenced thereafter with the use element which effectively produces a clone which can then be subjected to transformations (an arbitrary mix of rotations, scalings, translations).
What follows is a reformulation of your sample scene:
<svg
width="800" height="800"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<g id="angle">
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g id="multi">
<use xlink:href="#angle" />
<use xlink:href="#angle" transform="translate(10,-10)"/>
<use xlink:href="#angle" transform="translate(20,-20)"/>
</g>
</defs>
<!-- base case -->
<g transform="translate(50,50)">
<text x="50" y="50">Original</text>
<use xlink:href="#angle"/>
</g>
<g transform="translate(50,50) translate(200,0)">
<text x="50" y="50">Generated</text>
<use xlink:href="#multi" />
</g>
<!-- rotated -->
<g transform="translate(50,50) translate(0,200)">
<text x="50" y="50">Original</text>
<g transform="rotate(-20)">
<use xlink:href="#angle"/>
</g>
</g>
<g transform="translate(50,50) translate(200,200)">
<text x="75" y="25">Generated</text>
<g transform="rotate(-20)">
<use xlink:href="#multi"/>
</g>
</g>
</svg>
I.e. in this code the pattern applied with gap between the tiles or overlaping.
<svg width="400" height="400">
<defs>
<pattern id="pattern1"
x="0" y="0" width="0.1" height="0.2"
patternUnits="objectBoundingBox"
>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="170" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="10" y="110" width="235" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
How to do that tiles were placed side by side and the last tile which is not fit in rectangle will be sliced?
You can't do what you want with objectBoundingBox units. You need to use patternUnits="userSpaceOnUse".
<svg width="400" height="400">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="170" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="10" y="110" width="235" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
But, as you can see, the default pattern origin is at the origin of the SVG document (the top left). To change that so that the pattern is aligned with the rectangles, you'll need to define the rectangles at the origin and move them into position with a transform.
<svg width="400" height="400">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="0" y="0" width="170" height="100" transform="translate(10,10)"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="0" y="0" width="235" height="100" transform="translate(10,110)"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
I want to apply a pattern to a few svg elements, the pattern should apply from the (0,0) point for each element.
First I try code like this
<svg width="400" height="400">
<defs>
<pattern id="pattern1"
x="0" y="0" width="25" height="25"
patternUnits="userSpaceOnUse"
>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="110" y="17" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="210" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="0" y="110" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
The issue in this example is that the pattern for each element starts from the (0,0) point of the svg document not of each element.
Ok, lets try (setting the patternUnits="objectBoundingBox" attribute to the pattern definition so that the coordinate system for the pattern starts from the (0,0) point of each element)[https://jsfiddle.net/gwrgd1wf/1/]
The Coordinate system start point is changed as I want it, but the pattern has stopped tiling and the width and height attribute of pattern stop working properly. You can see I set height="2", but it does not change the height of the pattern.
So my question is how to properly use the patternUnits="objectBoundingBox" attribute?
In objectBoundingBox units 1 unit is the size of the shape so if you write 2 that means the pattern is 2 times the size of the shape so 1/2 the pattern fills the shape and you get no tiling.
If you want tiling you'll need to make the pattern smaller than the shape e.g. with 0.2 you'll get 5 circles displayed. E.g.
<svg width="400" height="400">
<defs>
<pattern id="pattern1"
x="0" y="0" width="0.2" height="0.2"
patternUnits="objectBoundingBox"
>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="110" y="17" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="210" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="0" y="110" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
i have an pattern that i repeat in a rectangle. By default it start at the top left of the rectangle and flows across. Instead of starting the first pattern at the top left is it possible to start it from say the middle and work outwards from that point?
Cheers
Luke
You can translate a pattern using a patternTransform e.g.
<svg>
<defs>
<pattern id="pattern1"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
<pattern id="pattern2"
x="10" y="10" width="20" height="20"
patternTransform="translate(2, 5)" patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="140" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
</svg>
The image is chopping off when i am trying to convert svg file to png image using org.apache.batik.apps.rasterizer.SVGConverter. The java code is mentioned below.
SVGConverter svgConverter = new SVGConverter();
svgConverter.setDestinationType(DestinationType.PNG);
svgConverter.setSources(new String[]{ new File(svgsource).toURL().toString() });
svgConverter.setDst(new File(imgDest));
svgConverter.execute();
Also please find the code for SVG file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="10" y1="0" x2="10" y2="500" style="stroke: #000000; stroke-width: 1;" />
<line x1="10" y1="500" x2="500" y2="500" style="stroke: #000000; stroke-width: 1;" />
<text x="0" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PA</text>
<line x1="100" y1="0" x2="100" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="100" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PB</text>
<line x1="200" y1="0" x2="200" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="200" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PC</text>
<line x1="300" y1="0" x2="300" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="300" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PA</text>
<line x1="400" y1="0" x2="400" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="400" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PB</text>
<line x1="10" y1="100" x2="500" y2="100" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="200" x2="500" y2="200" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="300" x2="500" y2="300" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="400" x2="500" y2="400" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="450" x2="100" y2="450"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="100" y1="450" x2="200" y2="330"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="200" y1="330" x2="300" y2="380"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<polygon points="300,380 400,320 400,360 300,380"
style="fill:paleturquoise; stroke: darkturquoise; stroke-width:1" />
<line x1="100" y1="420" x2="100" y2="460"
style="fill:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="200" y1="340" x2="200" y2="380"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="300" y1="310" x2="300" y2="350"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="400" y1="320" x2="400" y2="360"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<text x="400" y="320" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >320</text>
<text x="400" y="360" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >360</text>
</svg>
Please also find the online editor image and png file which is generated by the Java code .
Please help me to get the full image as online image editor.
Mention the height and width in svg tag like
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">