<div>I have improved it a bit by using:</div>
<div> </div>
<div><?xml version="1.0" standalone="no"?><br><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "<a href="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd</a>"><br>
<svg viewBox="0 0 57 104" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>"><br><path d="M 0,0 L 56,0 L 0,102 L 0,0 z" fill="#BEBEBE" stroke="#BEBEBE" stroke-width="1" /> <br>
</svg></div>
<div> </div>
<div>However at 150% when the text is wrapping I see a faint thin line of red on top of the SVG from the block background enclosing it.<br><br></div>
<div class="gmail_quote">2008/12/17 Mark Cilia Vincenti <span dir="ltr"><<a href="mailto:markciliavincenti@gmail.com">markciliavincenti@gmail.com</a>></span><br>
<blockquote class="gmail_quote" style="PADDING-LEFT: 1ex; MARGIN: 0px 0px 0px 0.8ex; BORDER-LEFT: #ccc 1px solid">
<div>Hi,</div>
<div> </div>
<div>I have a table with 2 columns:</div>
<div> </div>
<div>The left column has the background color #BEBEBE.</div>
<div>The right column has triangle.svg as a background image.</div>
<div> </div>
<div>I have this SVG:</div>
<div> </div>
<div><?xml version="1.0" standalone="no"?><br><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "<a href="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" target="_blank">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd</a>"></div>
<div><svg viewBox="0 0 57 104" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>"><br><polygon points="0,0 0,104 57,0" fill="#BEBEBE" /><br>
</svg></div>
<div> </div>
<div>This produces something that looks a bit like antialiasing at the top of the image from what I can see. In fact by putting the whole table inside a block with background-color="red", it was apparent. And it prints as well.</div>
<div> </div>
<div>So I tried this instead:</div>
<div> </div>
<div>
<div><?xml version="1.0" standalone="no"?><br><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "<a href="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" target="_blank">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd</a>"></div>
<div><svg viewBox="0 0 57 104" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>"><br><polygon points="0,0 0,104 57,0" fill="#BEBEBE" stroke="#BEBEBE" stroke-width="1" /><br>
</svg></div>
<div> </div>
<div>This still shows the red background at the top at certain percentages, but it's less obvious. However more alarmingly is that the top right corner looks like it's chopped off. It's no longer pointed.</div>
<div> </div>
<div>How can I achieve this please?</div>
<div> </div>
<div>Full FO code here:</div>
<div> </div>
<div><fo:block background-color="red"><br> <fo:table width="100%" space-after.optimum="6pt"><br> <fo:table-column /><br> <fo:table-column column-width="5mm" /><br>
<fo:table-body><br> <fo:table-row height="5mm"><br> <fo:table-cell background-color="#BEBEBE"><br> <fo:block margin-left="1mm" line-height="5mm" font-size="10.5pt" color="#FFFFFF" font-weight="bold">This is a long sentence and it may or may not wrap.</fo:block><br>
</fo:table-cell><br> <fo:table-cell rx:background-content-height="100%" rx:background-content-width="5mm" rx:background-scaling="non-uniform" background-repeat="no-repeat" background="url('triangle.svg')" /><br>
</fo:table-row><br> </fo:table-body><br> </fo:table><br></fo:block><br></div></div></blockquote></div><br>