Closed Bug 487091 Opened 16 years ago Closed 16 years ago

Multiple SVG images embedded in-line cause earlier images to bleed into later images when filters are used

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: rsk, Unassigned)

Details

Attachments

(3 files, 1 obsolete file)

The attached file illustrates the SVG filters bug
30.49 KB, application/xhtml+xml
Details
PNG screen shot illustrating in-line SVG image bleed through
649.98 KB, image/png
Details
New XHTML source file illustrating in-line SVG image bleed-through
15.12 KB, application/xhtml+xml
Details
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3 Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3 I have created several images with OmniGraffle and exported to SVG. These images use drop-shadows and that feature is implemented in SVG using filters. When I copy/paste these images into a contain XHTML file, portions of the earlier images show up in the later images. I have commeted-out the portion of the SVG file that implements the drop-shadow and that stops the bleed through. I have attached a file, svg.xhtml to illustrate the problem. Reproducible: Always Steps to Reproduce: 1. Open the attached file in FF, view the results (I put the source in the "additional information" field. 2. Remove the commented out sections to see even more examples of bleed-through. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Spaces </title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 432 216" width="36pc" height="18pc"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:date>2009-04-02 20:02Z</dc:date> <!-- Produced by OmniGraffle Professional 5.1.1 --></metadata> <defs> <filter id="Shadow" filterUnits="userSpaceOnUse"> <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="3.488"/> <feOffset in="blur" result="offset" dx="0" dy="4"/> <feFlood flood-color="black" flood-opacity=".75" result="flood"/> <feComposite in="flood" in2="offset" operator="in"/> </filter> <font-face font-family="Arial" font-size="14" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="714.28577" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="Arrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"> <g> <path d="M 8 0 L 0 -3 L 0 3 Z" fill="none" stroke="currentColor" stroke-width="1"/> </g> </marker> <font-face font-family="Arial" font-size="12" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="750" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"> <g> <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/> </g> </marker> </defs> <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title> <g><title>Layer 1</title> <!-- <g> <use xl:href="#id205_Graphic" filter="url(#Shadow)"/> <use xl:href="#id214_Graphic" filter="url(#Shadow)"/> <use xl:href="#id215_Graphic" filter="url(#Shadow)"/> <use xl:href="#id216_Graphic" filter="url(#Shadow)"/> <use xl:href="#id217_Graphic" filter="url(#Shadow)"/> <use xl:href="#id223_Graphic" filter="url(#Shadow)"/> </g> --> <g id="id205_Graphic"> <path d="M 162.773285 70.481956 C 139.5 66.399994 148.78079 32.036594 185.90688 37.899994 C 189.35136 26.470352 232.524 28.325512 232.24176 37.899994 C 259.31232 25.654114 293.90686 50.072155 270.70273 62.318035 C 298.54657 68.255157 270.35135 100.243553 247.5 94.899994 C 245.6712 103.806435 204.81984 106.923195 201.23424 94.899994 C 178.10208 107.740196 129.86784 87.997673 162.773285 70.481956 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(170.60001 39.799995)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="19.324314" y="13" textLength="43.585938">Space </tspan> <tspan font-family="Arial" font-size="14" font-weight="500" x="62.13779" y="13" textLength="9.3378906">A </tspan> </text> </g> <line x1="302.53757" y1="95.01134" x2="285.09158" y2="89.243286" marker-end="url(#Arrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <g id="id214_Graphic"> <path d="M 310.3733 119.067116 C 287.1 115.2 296.3808 82.645203 333.5069 88.199997 C 336.95135 77.37192 380.124 79.12944 379.84177 88.199997 C 406.91232 76.598633 441.5069 99.73152 418.30273 111.33288 C 446.14655 116.95752 417.95135 147.26231 395.1 142.2 C 393.2712 150.63768 352.41986 153.59039 348.83426 142.2 C 325.70209 154.364395 277.46783 135.66095 310.3733 119.067116 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(318.20001 90)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="18.551853" y="13" textLength="53.69629">Space C </tspan> </text> </g> <g id="id215_Graphic"> <path d="M 15.173271 133.06712 C -8.100006 129.2 1.18079376 96.6452 38.306877 102.199997 C 41.751354 91.37192 84.923996 93.12944 84.641754 102.199997 C 111.71231 90.598633 146.30687 113.73152 123.102715 125.33288 C 150.94655 130.95752 122.75136 161.26231 99.899994 156.2 C 98.0712 164.63768 57.219833 167.59039 53.63423 156.2 C 30.502075 168.3644 -17.732162 149.66095 15.173271 133.06712 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(22.999992 104)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="18.938084" y="13" textLength="52.923828">Space B </tspan> </text> </g> <g id="id216_Graphic"> <path d="M 208.2 113.200005 L 288.6 113.200005 C 290.25687 113.200005 291.6 114.54315 291.6 116.200005 L 291.6 153.40001 C 291.6 155.05687 290.25687 156.40001 288.6 156.40001 L 208.2 156.40001 C 206.54314 156.40001 205.2 155.05687 205.2 153.40001 C 205.2 153.40001 205.2 153.40001 205.2 153.40001 L 205.2 116.200005 C 205.2 114.54315 206.54314 113.200005 208.2 113.200005 Z" fill="#bf97ae"/> <path d="M 208.2 113.200005 L 288.6 113.200005 C 290.25687 113.200005 291.6 114.54315 291.6 116.200005 L 291.6 153.40001 C 291.6 155.05687 290.25687 156.40001 288.6 156.40001 L 208.2 156.40001 C 206.54314 156.40001 205.2 155.05687 205.2 153.40001 C 205.2 153.40001 205.2 153.40001 205.2 153.40001 L 205.2 116.200005 C 205.2 114.54315 206.54314 113.200005 208.2 113.200005 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(210.2 120.8)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="20.528126" y="11" textLength="35.34375">Fileset </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="13.526173" y="25" textLength="49.347656">Accessor </tspan> </text> </g> <g id="id217_Graphic"> <path d="M 150.59999 169.2 L 230.99998 169.2 C 232.65685 169.2 233.99998 170.54314 233.99998 172.2 L 233.99998 209.40001 C 233.99998 211.05687 232.65685 212.40001 230.99998 212.40001 L 150.59999 212.40001 C 148.94313 212.40001 147.59999 211.05687 147.59999 209.40001 C 147.59999 209.40001 147.59999 209.40001 147.59999 209.40001 L 147.59999 172.2 C 147.59999 170.54314 148.94313 169.2 150.59999 169.2 Z" fill="#bf97ae"/> <path d="M 150.59999 169.2 L 230.99998 169.2 C 232.65685 169.2 233.99998 170.54314 233.99998 172.2 L 233.99998 209.40001 C 233.99998 211.05687 232.65685 212.40001 230.99998 212.40001 L 150.59999 212.40001 C 148.94313 212.40001 147.59999 211.05687 147.59999 209.40001 C 147.59999 209.40001 147.59999 209.40001 147.59999 209.40001 L 147.59999 172.2 C 147.59999 170.54314 148.94313 169.2 150.59999 169.2 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(152.59999 176.8)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="18.861134" y="11" textLength="38.677734">Groovy </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="15.858204" y="25" textLength="44.683594">Runtime </tspan> </text> </g> <line x1="124.12518" y1="105.49037" x2="147.32214" y2="95.620667" marker-end="url(#Arrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(26.499992 131.39999)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="90.052734">{ active:groovy* } </tspan> </text> <path d="M 89.12102 145.39999 C 94.828217 154.6553 121.20371 164.86665 138.994095 168.47223" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(183 71.199997)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="58.69922">{ res:/*.gy } </tspan> </text> <line x1="219.67673" y1="85.199997" x2="248.21324" y2="113.03379" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/> <g id="id223_Graphic"> <path d="M 258.59998 169.2 L 339 169.2 C 340.65686 169.2 342 170.54314 342 172.2 L 342 209.40001 C 342 211.05687 340.65686 212.40001 339 212.40001 L 258.59998 212.40001 C 256.94312 212.40001 255.59998 211.05687 255.59998 209.40001 C 255.59998 209.40001 255.59998 209.40001 255.59998 209.40001 L 255.6 172.2 C 255.6 170.54314 256.94315 169.2 258.6 169.2 Z" fill="#bf97ae"/> <path d="M 258.59998 169.2 L 339 169.2 C 340.65686 169.2 342 170.54314 342 172.2 L 342 209.40001 C 342 211.05687 340.65686 212.40001 339 212.40001 L 258.59998 212.40001 C 256.94312 212.40001 255.59998 211.05687 255.59998 209.40001 C 255.59998 209.40001 255.59998 209.40001 255.59998 209.40001 L 255.6 172.2 C 255.6 170.54314 256.94315 169.2 258.6 169.2 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(260.59998 176.8)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="23.639454" y="11" textLength="22.68164">XSL </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="45.43047" y="11" textLength="7.330078">T </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="11.085743" y="25" textLength="7.330078">T </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="17.970509" y="25" textLength="47.34375">ransform </tspan> </text> </g> <text transform="translate(329.19998 117.00001)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="72.035156">{ active:xslt* } </tspan> </text> <line x1="361.89145" y1="131" x2="340.90485" y2="169.57286" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/> <line x1="130.073746" y1="23.199999" x2="153.19389" y2="35.076447" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(6.9999695 7.2)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="0" y="13" textLength="214.59375"> active:groovy+operator@res:/fn.gy </tspan> </text> <path d="M 162 39.599998 C 179.40234 84.846085 163.15564 72.88878 86.490234 125.72234" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M 190.79999 169.2 C 107.51483 127.55742 172.20657 119.82622 203.90262 92.277855" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> </g> </svg> <p>Between Graphics</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 432 144" width="36pc" height="12pc"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:date>2009-04-02 19:59Z</dc:date> <!-- Produced by OmniGraffle Professional 5.1.1 --></metadata> <defs> <filter id="Shadow" filterUnits="userSpaceOnUse"> <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="3.488"/> <feOffset in="blur" result="offset" dx="0" dy="4"/> <feFlood flood-color="black" flood-opacity=".75" result="flood"/> <feComposite in="flood" in2="offset" operator="in"/> </filter> <font-face font-family="Arial" font-size="14" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="714.28577" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <font-face font-family="Arial" font-size="12" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="750" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"> <g> <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/> </g> </marker> </defs> <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title> <g><title>Layer 1</title> <!-- <g> <use xl:href="#id205_Graphic" filter="url(#Shadow)"/> <use xl:href="#id216_Graphic" filter="url(#Shadow)"/> </g> --> <g id="id205_Graphic"> <path d="M 178.11194 62.24054 C 153.67499 57.599995 163.41983 18.534237 202.40222 25.199997 C 206.01892 12.206299 251.3502 14.315323 251.05385 25.199997 C 279.47794 11.278366 315.80222 39.03782 291.43787 52.95945 C 320.67389 59.70902 291.06894 96.074776 267.07501 89.99999 C 265.15475 100.125214 222.26083 103.66847 218.49596 89.99999 C 194.20718 104.597275 143.56122 82.153145 178.11194 62.24054 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(186.08 27.359997)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="21.844318" y="13" textLength="43.585938">Space </tspan> <tspan font-family="Arial" font-size="14" font-weight="500" x="64.65779" y="13" textLength="9.3378906">A </tspan> </text> </g> <g id="id216_Graphic"> <path d="M 335.19998 89.99999 L 413.6 89.99999 C 415.80914 89.99999 417.6 91.790855 417.6 93.99999 L 417.6 129.2 C 417.6 131.40913 415.80914 133.2 413.6 133.2 L 335.19998 133.2 C 332.99084 133.2 331.19998 131.40913 331.19998 129.2 C 331.19998 129.2 331.19998 129.2 331.19998 129.2 L 331.19998 93.99999 C 331.19998 91.790855 332.99084 89.99999 335.19998 89.99999 Z" fill="#bf97ae"/> <path d="M 335.19998 89.99999 L 413.6 89.99999 C 415.80914 89.99999 417.6 91.790855 417.6 93.99999 L 417.6 129.2 C 417.6 131.40913 415.80914 133.2 413.6 133.2 L 335.19998 133.2 C 332.99084 133.2 331.19998 131.40913 331.19998 129.2 C 331.19998 129.2 331.19998 129.2 331.19998 129.2 L 331.19998 93.99999 C 331.19998 91.790855 332.99084 89.99999 335.19998 89.99999 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(336.19998 97.59999)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="21.190235" y="11" textLength="34.019531">logical </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="15.178516" y="25" textLength="46.04297">endpoint </tspan> </text> </g> <text transform="translate(192.5 65)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="82.716797">{ res:/person/* } </tspan> </text> <path d="M 270.78741 79 C 285.42651 88.35537 305.84314 81.942146 323.6784 86.951363" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(41.8 7.199999)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="0" y="13" textLength="112.833984">res:/person/teresa </tspan> </text> <path d="M 165.60001 36 C 194.73749 38.91375 206.17679 46.41311 214.84312 57.013496" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M 124.184616 23.199999 C 135.18289 38.530937 141.609955 32.20198 155.94215 33.828869" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> </g> </svg> <p>Between Graphics</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 432 144" width="36pc" height="12pc"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:date>2009-04-02 20:08Z</dc:date> <!-- Produced by OmniGraffle Professional 5.1.1 --></metadata> <defs> <filter id="Shadow" filterUnits="userSpaceOnUse"> <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="3.488"/> <feOffset in="blur" result="offset" dx="0" dy="4"/> <feFlood flood-color="black" flood-opacity=".75" result="flood"/> <feComposite in="flood" in2="offset" operator="in"/> </filter> <font-face font-family="Arial" font-size="14" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="714.28577" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"> <g> <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/> </g> </marker> <font-face font-family="Arial" font-size="12" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="750" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> </defs> <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title> <g><title>Layer 1</title> <g> <use xl:href="#id205_Graphic" filter="url(#Shadow)"/> <use xl:href="#id214_Graphic" filter="url(#Shadow)"/> <use xl:href="#id216_Graphic" filter="url(#Shadow)"/> </g> <g id="id205_Graphic"> <path d="M 101.57328 43.467117 C 78.300003 39.599998 87.580803 7.0452003 124.70689 12.5999985 C 128.15137 1.7719154 171.32401 3.529438 171.04176 12.5999985 C 198.11232 .99863815 232.70688 24.13152 209.50272 35.73288 C 237.34656 41.357517 209.15137 71.662323 186.3 66.6 C 184.47121 75.037674 143.61984 77.9904 140.03424 66.6 C 116.902084 78.764404 68.667847 60.06096 101.57328 43.467117 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(109.4 14.4)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="19.324314" y="13" textLength="43.585938">Space </tspan> <tspan font-family="Arial" font-size="14" font-weight="500" x="62.13779" y="13" textLength="9.3378906">A </tspan> </text> </g> <path d="M 252.24101 111.53351 C 266.8143 114.54831 269.38205 103.323006 281.93188 100.78803" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <g id="id214_Graphic"> <path d="M 303.17328 86.66712 C 279.9 82.800003 289.18079 50.245205 326.30688 55.800003 C 329.75134 44.97192 372.92398 46.729443 372.64175 55.800003 C 399.7123 44.198643 434.30688 67.331528 411.10272 78.932884 C 438.94653 84.557526 410.75134 114.86232 387.9 109.8 C 386.0712 118.237686 345.21985 121.19041 341.63425 109.8 C 318.50208 121.9644 270.26782 103.260963 303.17328 86.66712 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(311 57.6)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="18.938084" y="13" textLength="52.923828">Space B </tspan> </text> </g> <g id="id216_Graphic"> <path d="M 170.60001 90 L 247 90 C 249.76143 90 252 92.23858 252 95 L 252 128.2 C 252 130.961426 249.76143 133.2 247 133.2 L 170.60001 133.2 C 167.83858 133.2 165.60001 130.961426 165.60001 128.2 C 165.60001 128.2 165.60001 128.2 165.60001 128.2 L 165.60001 95 C 165.60001 92.23858 167.83858 90 170.60001 90 Z" fill="#97bfbc"/> <path d="M 170.60001 90 L 247 90 C 249.76143 90 252 92.23858 252 95 L 252 128.2 C 252 130.961426 249.76143 133.2 247 133.2 L 170.60001 133.2 C 167.83858 133.2 165.60001 130.961426 165.60001 128.2 C 165.60001 128.2 165.60001 128.2 165.60001 128.2 L 165.60001 95 C 165.60001 92.23858 167.83858 90 170.60001 90 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(170.60001 104.6)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="21.196095" y="11" textLength="34.007812">Import </tspan> </text> </g> <text transform="translate(121.8 39.599998)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="87.67969">{ Space B's set } </tspan> </text> <line x1="172.73549" y1="53.6" x2="208.8" y2="90" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/> </g> </g> </svg> <p>Between images</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 432 144" width="36pc" height="12pc"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:date>2009-04-06 17:34Z</dc:date> <!-- Produced by OmniGraffle Professional 5.1.1 --> </metadata> <defs> <font-face font-family="Arial" font-size="14" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="714.28577" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <font-face font-family="Arial" font-size="12" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.242188" slope="0" x-height="500" cap-height="750" ascent="905.27344" descent="-211.91406" font-weight="500"> <font-face-src> <font-face-name name="ArialMT"/> </font-face-src> </font-face> <marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"> <g> <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/> </g> </marker> </defs> <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"> <title>Canvas 1</title> <g> <title>Layer 1</title> <path d="M 178.11194 62.24054 C 153.67499 57.599995 163.41983 18.534237 202.40222 25.199997 C 206.01892 12.206299 251.3502 14.315323 251.05385 25.199997 C 279.47794 11.278366 315.80222 39.03782 291.43787 52.95945 C 320.67389 59.70902 291.06894 96.074776 267.07501 89.99999 C 265.15475 100.125214 222.26083 103.66847 218.49596 89.99999 C 194.20718 104.597275 143.56122 82.153145 178.11194 62.24054 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(186.08 27.359997)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="21.844318" y="13" textLength="43.585938">Space </tspan> <tspan font-family="Arial" font-size="14" font-weight="500" x="64.65779" y="13" textLength="9.3378906">A</tspan> </text> <path d="M 335.19998 89.99999 L 413.6 89.99999 C 415.80914 89.99999 417.6 91.790855 417.6 93.99999 L 417.6 129.2 C 417.6 131.40913 415.80914 133.2 413.6 133.2 L 335.19998 133.2 C 332.99084 133.2 331.19998 131.40913 331.19998 129.2 C 331.19998 129.2 331.19998 129.2 331.19998 129.2 L 331.19998 93.99999 C 331.19998 91.790855 332.99084 89.99999 335.19998 89.99999 Z" fill="#bf97ae"/> <path d="M 335.19998 89.99999 L 413.6 89.99999 C 415.80914 89.99999 417.6 91.790855 417.6 93.99999 L 417.6 129.2 C 417.6 131.40913 415.80914 133.2 413.6 133.2 L 335.19998 133.2 C 332.99084 133.2 331.19998 131.40913 331.19998 129.2 C 331.19998 129.2 331.19998 129.2 331.19998 129.2 L 331.19998 93.99999 C 331.19998 91.790855 332.99084 89.99999 335.19998 89.99999 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/> <text transform="translate(336.19998 97.59999)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="21.190235" y="11" textLength="34.019531">logical </tspan> <tspan font-family="Arial" font-size="12" font-weight="500" x="15.178516" y="25" textLength="46.04297">endpoint </tspan> </text> <text transform="translate(192.5 65)" fill="black"> <tspan font-family="Arial" font-size="12" font-weight="500" x="0" y="11" textLength="82.716797">{ res:/person/* } </tspan> </text> <path d="M 270.78741 79 C 285.42651 88.35537 305.84314 81.942146 323.6784 86.951363" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <text transform="translate(41.8 7.199999)" fill="black"> <tspan font-family="Arial" font-size="14" font-weight="500" x="0" y="13" textLength="112.833984"> res:/person/teresa </tspan> </text> <path d="M 165.60001 36 C 194.73749 38.91375 206.17679 46.41311 214.84312 57.013496" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M 124.184616 23.199999 C 135.18289 38.530937 141.609955 32.20198 155.94215 33.828869" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> </g> </svg> </body> </html>
Please use the Add an attachment facility to add your example.
Component: General → SVG
Product: Firefox → Core
QA Contact: general → general
I don't see any bleed through with the attached testcase. I do see one problem in the source though. Multiple elements have the same id attribute (that's invalid), so it could well be that the <use> is picking up the wrong element (one from an earlier inline SVG fragment. Basically, when creating files like this you need to check that your tools haven't given the same id to elements in the separate SVG files that you're inlining.
If you fix up the file to be valid and still get the problem, then please also attach a screenshot Randy.
Yes, I will make sure the file illustrates the problem correctly and get a screen capture. I will have to do this tomorrow.
This screen shot shows two OmniGraffle windows open on the left. These are the original images. To the right is FireFox, then Camino and finally Safari (4Beta) displaying the same file. (Note the source file is also updated today as an attachment). Notice that the first image diagram elements, or possibly the drop-shadows, are displayed in the second in-line SVG image.
This screen shot shows the OmniGraffle original images (left) and then FireFox, Camino and Safari (4, beta) displaying the file. Note: the source file was also updated today.
Attachment #371448 - Attachment is obsolete: true
This is the source code that illustrates the bleed-through issue. Note: There are two in-line SVG images. They are taking directly from OmniGraffle SVG export and pasted into this document. Please see the companion screen shot to see the original OmniGraffle source diagram images and this file displayed in FireFox, Camino and Safari 4.
I have fixed the source file to better illustrate the problem and also attached a screen shot from my computer. The screen shot shows the OmniGraffle image editor windows that were then exported to SVG. I took the exported SVG directly and pasted them into the XHTML file that I've also uploaded.
Attachment #371450 - Attachment mime type: text/xhtml → application/xhtml+xml
The file is still invalid. You have multiple elements that have id attributes with the same value. You must correct this issue first.
I did change the file to use unique id attributes for the different graphic elements and this -did- resolve the problem. I will report the issue back to OmniGroup. Thank you for your help.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → INVALID
Isn't your problem when you do the step "When I copy/paste these images into a contain XHTML file" isn't it? Doesn't that make it your fault rather than something OmniGraffle/OmniGroup can do anything about?
That's a good question. The current situation, where you can't have duplicate graphic ID attribute values within a context that is going to be reasonably common (a single XHTML file), surfaces a serious limitation on composition with SVG. Some context - I work for 1060 Research and our computing platform, NetKernel, is focused on resource identification, computation and composition. In NetKernel one uses URI identifiers within application software to identify parts of information that are then composed into a whole. (One simple example is mine, where I'm composing a single documentation page from other resources, some of which happen to be SVG source files). NetKernel is essentially an application software platform version of what people are doing with REST and the web in general. You are correct, in my bug report I stated that I did a copy/paste. But that was a simplistic description to avoid discussing composition for the bug report. From my perspective is it not my issue nor anyone else's who wishes to compose a resource from constituent SVG resources. I haven't researched the SVG specification so I cannot point to a specific issue that needs to be addressed but it does seem to me that either the SVG specification, implementations or a combination are the root problem. I think this is a very serious issue for SVG users but I'm not sure who should focus on figuring out what to do. The root problem description is simple: "Composing a resource from constituent SVG resources cannot be done reliably". Do you agree? From the perspective of helping the industry use and adopt SVG, what do you think should be done about this? -- Randy
> "Composing a resource from constituent SVG resources cannot be done reliably" You need to take care to fix IDs to be unique, right. I think that as far as is reasonable, SVG authoring tools should try and take steps to allow people to inline the SVG they create without worrying about having to tweak it. That should probably include attempting to make IDs semi-unique. I don't think they should necessarily go crazy though and start making really long IDs by hashing on date, file name, computer's serial number, etc. I also think "viewers" like Firefox should report duplicate IDs to the Error Console when we encounter them to minimize author debugging pain when it happens. Ultimately though, this is the responsibility of the "composer". Whether that involves hand checking, or automatically pre-parsing SVG files as they upload to a server to replace IDs with unique IDs, or pre-parsing XML fragments as they are composed to get rid of duplicate IDs, etc. I don't know. I suspect the mechanism used would vary case by case. As for whether the spec is at fault, maybe, but I'd like to see a proposal for referencing fragments that would be more reliable than using IDs before making that call.
Jonathan, I discussed the situation with the NetKernel team and we agree with you about taking on the responsibility as the "composition platform". We are going to write an accessor that will filter identifier values and offset them (in a manner still to be determined) to ensure that within the XHTML outer context they are all unique. That will mean that when using NetKernel, SVG composition will work smoothly. I have already suggested to the OmniGroup that they use a GUID generator for the identifiers but they may think that too "heavy" a solution. I will also suggest that they provide, in their SVG export, the ability to specify and starting ID for the exporting. That will help in situation where people are composing from their generated SVG resources without NetKernel. Thank you for you reply and thoughts.
You can also use <use> and <object> tags to aggregate content without needing to worry about conflicting ids. External <use> only works with Firefox 3.5 though.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: