Skip to content

Commit

Permalink
Merge pull request #456 from rpearce/fix/mask-ids-hidden
Browse files Browse the repository at this point in the history 
fix(438): mask IDs being duplicated causing them to be hidden
  • Loading branch information
@rpearce
rpearce authored Dec 15, 2023
2 parents 0e08d66 + 18910b1 commit f15cc06
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
11 changes: 11 additions & 0 deletions source/Controlled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -709,6 +709,17 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
const tmp = document.createElement('div')
tmp.innerHTML = imgEl.outerHTML

// Solves the mask ID issue in https://github.com/rpearce/react-medium-image-zoom/issues/438
tmp.querySelectorAll('mask[id]').forEach(maskEl => {
const newId = maskEl.id + '-zoom'

tmp.querySelectorAll(`[mask="url(#${maskEl.id})"]`).forEach(maskedEl => {
maskedEl.setAttribute('mask', `url(#${newId})`)
})

maskEl.id = newId
})

const svg = tmp.firstChild as SVGSVGElement
svg.style.width = `${styleModalImg.width || 0}px`
svg.style.height = `${styleModalImg.height || 0}px`
Expand Down
14 changes: 14 additions & 0 deletions stories/SVG.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,20 @@ export const AnimatingSquare = (props) => (
</main>
)

// https://github.com/rpearce/react-medium-image-zoom/issues/438
export const Excalidraw = () => (
<main aria-label="Story">
<h1>A series of shapes connected by arrows with descriptive text</h1>
<div className="mw-600">
<Zoom>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 626.29296875 489.6796875" width="626.2929" height="489.6796">
<rect x="0" y="0" width="626.29296875" height="489.6796875" fill="#ffff"></rect><g strokeLinecap="round" transform="translate(20 20.55078125) rotate(0 56.818359375 46.0390625)"><path d="M76.44 1.84 C85.17 3.54, 93.63 10.5, 99.59 16.35 C105.54 22.19, 110.29 29.57, 112.17 36.9 C114.06 44.24, 113.8 52.94, 110.9 60.34 C107.99 67.74, 102.04 76, 94.77 81.3 C87.49 86.6, 76.65 90.75, 67.24 92.15 C57.82 93.54, 47.35 92.35, 38.28 89.64 C29.2 86.93, 18.87 81.58, 12.77 75.86 C6.68 70.14, 3.38 62.93, 1.69 55.33 C0 47.72, -0.46 37.43, 2.61 30.23 C5.68 23.02, 12.85 17.08, 20.1 12.11 C27.36 7.14, 35.75 1.58, 46.16 0.4 C56.56 -0.79, 75.29 3.46, 82.55 4.99 C89.82 6.52, 90.11 8.8, 89.75 9.59 M35.64 2.79 C43.74 -0.96, 54.48 -2, 63.94 -0.74 C73.41 0.52, 84.69 5.74, 92.42 10.36 C100.16 14.97, 107.02 20.2, 110.34 26.97 C113.67 33.75, 113.56 43.07, 112.35 51 C111.13 58.94, 108.74 68.38, 103.05 74.59 C97.35 80.8, 86.83 85.62, 78.16 88.27 C69.49 90.92, 60.26 91.36, 51.04 90.48 C41.81 89.6, 30.55 87.38, 22.82 82.99 C15.09 78.6, 8.53 71.2, 4.68 64.11 C0.82 57.02, -1.35 48.06, -0.32 40.45 C0.7 32.83, 5.17 24.66, 10.82 18.44 C16.47 12.23, 29.67 5.29, 33.59 3.16 C37.51 1.03, 33.75 4.79, 34.36 5.67" stroke="#000000" strokeWidth="1" fill="none"></path></g><g strokeLinecap="round" transform="translate(392.59375 20) rotate(0 67.927734375 50.771484375)"><path d="M73.65 -0.19 C83.82 -0.22, 95.32 4.01, 104.01 8.36 C112.7 12.7, 120.45 19.29, 125.8 25.89 C131.16 32.49, 135.56 40.37, 136.12 47.97 C136.69 55.57, 133.69 64.14, 129.19 71.5 C124.69 78.87, 117.51 87.27, 109.13 92.17 C100.75 97.07, 89.51 99.76, 78.91 100.92 C68.31 102.09, 55.39 101.58, 45.52 99.18 C35.66 96.78, 26.88 92.24, 19.74 86.53 C12.59 80.81, 5.68 72.47, 2.64 64.87 C-0.39 57.28, -0.58 48.52, 1.51 40.96 C3.61 33.39, 8.57 25.47, 15.22 19.48 C21.87 13.5, 31.33 8.4, 41.44 5.05 C51.54 1.69, 69.9 0.1, 75.86 -0.63 C81.82 -1.35, 77.44 -0.22, 77.21 0.69 M45.05 3.73 C54.51 0.92, 68.17 0.28, 78.84 1.45 C89.51 2.62, 100.52 6.49, 109.08 10.73 C117.64 14.96, 125.67 19.96, 130.21 26.86 C134.75 33.76, 136.83 43.91, 136.32 52.15 C135.81 60.4, 132.24 69.74, 127.14 76.32 C122.05 82.91, 114.62 87.6, 105.74 91.66 C96.85 95.73, 84.29 99.63, 73.85 100.69 C63.41 101.75, 52.54 100.93, 43.1 98.01 C33.66 95.09, 23.96 89.11, 17.22 83.17 C10.48 77.22, 5.02 70.2, 2.66 62.37 C0.3 54.54, 0.37 44.03, 3.06 36.18 C5.75 28.34, 11.66 21.06, 18.79 15.32 C25.92 9.58, 41.46 3.48, 45.84 1.75 C50.23 0.02, 44.77 3.93, 45.08 4.92" stroke="#000000" strokeWidth="1" fill="none"></path></g><g mask="url(#mask-ooJ4ibF08UocumcqOa1EM)" strokeLinecap="round"><g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)"><path d="M0.15 -0.24 C38.69 -0.34, 193.23 -0.72, 231.49 -0.81 M-1.23 -1.41 C37.2 -1.27, 192.03 0.48, 230.91 0.82" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)"><path d="M202.21 11.96 C211.96 5.78, 221.05 4.29, 230.39 -0.44 M202.16 11.32 C212.6 8.26, 221.12 3.41, 231.42 0.63" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(145.59428097835973 59.070939438578705) rotate(0 115.39682997613369 -0.4915348908477881)"><path d="M202.42 -8.56 C212.06 -8.19, 221.09 -3.13, 230.39 -0.44 M202.37 -9.2 C212.71 -5.25, 221.16 -3.08, 231.42 0.63" stroke="#000000" strokeWidth="1" fill="none"></path></g></g><mask id="mask-ooJ4ibF08UocumcqOa1EM"><rect x="0" y="0" fill="#fff" width="476.3879409306271" height="160.05400922027428"></rect><rect x="236.2111350633802" y="46.07940454773092" fill="#000" width="49.55995178222656" height="25" opacity="1"></rect></mask><g transform="translate(236.2111350633802 46.07940454773092) rotate(0 24.512669051224293 12.696544553246326)"><text x="24.77997589111328" y="0" fontFamily="Virgil, Segoe UI Emoji" fontSize="20px" fill="#000000" textAnchor="middle" style={{ whiteSpace: 'pre' }} direction="ltr" dominantBaseline="text-before-edge">Text</text></g><g mask="url(#mask-SzkdVd0dyrggj1A8lYRnx)" strokeLinecap="round"><g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)"><path d="M1.16 1.1 C13.46 28.52, 62.75 137.7, 74.96 164.96 M0.32 0.63 C12.31 27.65, 61.03 135.53, 73.78 163.11" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)"><path d="M54.58 140.97 C62.05 148.39, 69.93 157.55, 74.43 161.75 M51.86 142.36 C59.42 148.76, 65.4 156.07, 73.14 163.54" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(101.609375 126.671875) rotate(0 37.703125 82.224609375)"><path d="M73.25 132.45 C73.31 143.45, 73.76 156, 74.43 161.75 M70.53 133.84 C72.19 142.85, 72.24 152.87, 73.14 163.54" stroke="#000000" strokeWidth="1" fill="none"></path></g></g><mask id="mask-SzkdVd0dyrggj1A8lYRnx"><rect x="0" y="0" fill="#fff" width="277.015625" height="391.12109375"></rect><rect x="82.74254608154297" y="196.396484375" fill="#000" width="113.13990783691406" height="25" opacity="1"></rect></mask><g transform="translate(82.74254608154297 196.396484375) rotate(0 56.50484466232359 13.071097182855027)"><text x="56.56995391845703" y="0" fontFamily="Virgil, Segoe UI Emoji" fontSize="20px" fill="#000000" textAnchor="middle" style={{ whiteSpace: 'pre' }} direction="ltr" dominantBaseline="text-before-edge">Text Arrow</text></g><g strokeLinecap="round" transform="translate(174.39453125 244) rotate(0 94.26953125 68.515625)"><path d="M118.75 17.25 M118.75 17.25 C136.41 30.62, 149.3 43.12, 164.79 51.75 M118.75 17.25 C134.22 27.86, 149.75 41.11, 164.79 51.75 M164.79 51.75 C186.66 67.31, 189.85 67.4, 164.79 86.25 M164.79 51.75 C187.4 70.11, 188.16 67.21, 164.79 86.25 M164.79 86.25 C147.25 100.24, 129.87 110.32, 118.75 119.78 M164.79 86.25 C150.71 95.77, 136.22 107.08, 118.75 119.78 M118.75 119.78 C96.45 135.91, 95.43 136.4, 71.25 119.78 M118.75 119.78 C95.24 136.6, 94.84 137.75, 71.25 119.78 M71.25 119.78 C56.5 110.18, 39.52 99.98, 23.75 86.25 M71.25 119.78 C61.78 112.63, 51.46 106.26, 23.75 86.25 M23.75 86.25 C-1.23 68.64, 1.79 69.34, 23.75 51.75 M23.75 86.25 C1.18 69.81, -2.01 68.03, 23.75 51.75 M23.75 51.75 C33.82 43.77, 48.63 33.66, 71.25 17.25 M23.75 51.75 C37.67 41.71, 52.89 30.07, 71.25 17.25 M71.25 17.25 C96 -0.01, 93.11 -1.17, 118.75 17.25 M71.25 17.25 C93.47 0.15, 96.36 -1.46, 118.75 17.25" stroke="#000000" strokeWidth="1" fill="none"></path></g><g mask="url(#mask-GrRrUWX5cd0_tTvab9KPU)" strokeLinecap="round"><g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)"><path d="M-0.96 -1.04 C4.08 29.88, 25.02 155.15, 30.2 186.25 M0.74 1.03 C5.67 31.52, 24.73 153.42, 29.54 184.37" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)"><path d="M13.32 159.02 C20.33 166.8, 23.47 174.35, 30.77 182.75 M15.65 158.92 C19.5 166.51, 24.96 174.51, 30.32 185.21" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(488.734375 135.21875) rotate(0 14.822265625 92.8828125)"><path d="M33.6 155.86 C34.59 164.42, 31.68 172.91, 30.77 182.75 M35.93 155.75 C33.27 164.25, 32.21 173.27, 30.32 185.21" stroke="#000000" strokeWidth="1" fill="none"></path></g></g><mask id="mask-GrRrUWX5cd0_tTvab9KPU"><rect x="0" y="0" fill="#fff" width="618.37890625" height="420.984375"></rect><rect x="406.3067092895508" y="215.6015625" fill="#000" width="194.49986267089844" height="25" opacity="1"></rect></mask><g transform="translate(406.3067092895508 215.6015625) rotate(0 97.04689681343734 12.220587964728452)"><text x="97.24993133544922" y="0" fontFamily="Virgil, Segoe UI Emoji" fontSize="20px" fill="#000000" textAnchor="middle" style={{ whiteSpace: 'pre' }} direction="ltr" dominantBaseline="text-before-edge">Random Text Arrow</text></g><g strokeLinecap="round" transform="translate(458.45703125 325.26171875) rotate(0 73.91796875 72.208984375)"><path d="M32 0 M32 0 C59.59 -0.4, 88.53 0.12, 115.84 0 M32 0 C54.4 -1.14, 74.38 -0.62, 115.84 0 M115.84 0 C137.69 1.49, 145.9 11.96, 147.84 32 M115.84 0 C137.47 0.64, 146.34 10.98, 147.84 32 M147.84 32 C148.28 48.33, 145.78 65.81, 147.84 112.42 M147.84 32 C146.26 58.81, 147.92 86.35, 147.84 112.42 M147.84 112.42 C149.33 133.71, 138.22 145.63, 115.84 144.42 M147.84 112.42 C149.49 133.66, 138.02 144.09, 115.84 144.42 M115.84 144.42 C97.9 143.38, 76.73 142.11, 32 144.42 M115.84 144.42 C89 144.85, 62.01 145.17, 32 144.42 M32 144.42 C10.37 142.96, -0.67 135.22, 0 112.42 M32 144.42 C10.33 146.48, 1.7 132.31, 0 112.42 M0 112.42 C0.69 85.82, -2.2 56.5, 0 32 M0 112.42 C0.4 96.54, 0.21 79.98, 0 32 M0 32 C-1.83 9.28, 9.25 -1.34, 32 0 M0 32 C-2.19 8.75, 12.95 -0.69, 32 0" stroke="#000000" strokeWidth="1" fill="none"></path></g><g strokeLinecap="round"><g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)"><path d="M0.12 0.48 C17.85 4.98, 88.64 21.82, 106.2 26.39 M-1.27 -0.31 C16.34 4.42, 87.81 23.33, 105.45 27.74" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)"><path d="M76.39 31.24 C83.64 29.16, 94.76 29.29, 106.39 26.92 M76.04 29.84 C83.93 29.99, 92.75 29.2, 104.74 27.03" stroke="#000000" strokeWidth="1" fill="none"></path></g><g transform="translate(337.21484375 348.984375) rotate(0 52.912109375 13.373046875)"><path d="M81.53 11.37 C87.19 15.05, 96.82 20.92, 106.39 26.92 M81.18 9.98 C87.65 15.55, 95.07 20.17, 104.74 27.03" stroke="#000000" strokeWidth="1" fill="none"></path></g></g><mask></mask>
</svg>
</Zoom>
</div>
</main>
)

export const BirdOnBackground = () => (
<main aria-label="Story">
<h1>A bird SVG on a non-SVG background</h1>
Expand Down

0 comments on commit f15cc06

Please sign in to comment.