MobileRead Forums - View Single Post - Want to create border on image inside SVG wrapper

Jellby · 09-28-2014, 02:47 PM

You can simply add a <rect> with stroke after the image (it will be drawn above it). The problem here is that it will overlap the image.

Code:

<svg ... viewBox="0 0 600 800">
<image height="800" width="600" xlink:href="Cover.jpg"/>
<rect height="800" width="600" style="stroke-width:10;stroke:rgb(255,0,0);fill:none;"/>

If you don't want that, and you want some even border around the image, you can do some math, as you did with the viewport, and put a filled <rect> behind the image:

Code:

<svg ... viewBox="-10 -10 620 820">
<rect height="820" width="620" x="-10" y="-10" style="fill:rgb(255,0,0);"/>
<image height="800" width="600" xlink:href="Cover.jpg"/>

Note the math is very simple: for a 10-unit-wide border, use "-10" instead of "0" and "820" instead of "800" (in viewBox and in the <rect> properties).

Another idea would be to scale the image down, so you can skip the math, but then the borders are not even (because adding is not the same as multiplying), you don't have the same control on their size, and you need maths for the translations (now the math is divide by two):

Code:

<svg ... viewBox="0 0 600 800">
<rect height="800" width="600" style="fill:rgb(255,0,0);"/>
<g transform="translate(300,400)">
<image height="800" width="600" x="-300" y="-400" xlink:href="Cover.jpg" transform="scale(0.95)" />
</g>

09-28-2014, 02:47 PM	#5
Jellby frumious Bandersnatch Posts: 7,557 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You can simply add a <rect> with stroke after the image (it will be drawn above it). The problem here is that it will overlap the image. Code: <svg ... viewBox="0 0 600 800"> <image height="800" width="600" xlink:href="Cover.jpg"/> <rect height="800" width="600" style="stroke-width:10;stroke:rgb(255,0,0);fill:none;"/> If you don't want that, and you want some even border around the image, you can do some math, as you did with the viewport, and put a filled <rect> behind the image: Code: <svg ... viewBox="-10 -10 620 820"> <rect height="820" width="620" x="-10" y="-10" style="fill:rgb(255,0,0);"/> <image height="800" width="600" xlink:href="Cover.jpg"/> Note the math is very simple: for a 10-unit-wide border, use "-10" instead of "0" and "820" instead of "800" (in viewBox and in the <rect> properties). Another idea would be to scale the image down, so you can skip the math, but then the borders are not even (because adding is not the same as multiplying), you don't have the same control on their size, and you need maths for the translations (now the math is divide by two): Code: <svg ... viewBox="0 0 600 800"> <rect height="800" width="600" style="fill:rgb(255,0,0);"/> <g transform="translate(300,400)"> <image height="800" width="600" x="-300" y="-400" xlink:href="Cover.jpg" transform="scale(0.95)" /> </g> Last edited by Jellby; 09-29-2014 at 04:42 AM.