kylefang/react-three-fiber
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-three-fiber.git synced 2026-05-29 16:07:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix event bubbling for parent objects, fix first render with incorrect viewport values

Browse Source
This commit is contained in:
Paul Henschel
2019-04-25 17:32:06 +02:00
parent 19fab341df
commit dd9dd79f9a
12 changed files with 602 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.size-snapshot.json
View File

@@ -1,21 +1,21 @@
{
"dist/index.js": {
"bundled": 25394,
"minified": 12046,
"gzipped": 4369,
"bundled": 25406,
"minified": 12000,
"gzipped": 4348,
"treeshaked": {
"rollup": {
"code": 9835,
"import_statements": 615
"code": 9773,
"import_statements": 602
},
"webpack": {
"code": 11378
"code": 11319
}
}
},
"dist/index.cjs.js": {
"bundled": 28435,
"minified": 13781,
"gzipped": 4585
"bundled": 28419,
"minified": 13715,
"gzipped": 4560
}
}

122
examples/components/Persons.js Normal file
View File

@@ -0,0 +1,122 @@
import * as THREE from 'three'
import React, { useState, useRef, useContext, useEffect, useCallback, useMemo } from 'react'
import { apply, Canvas, useRender, useThree } from 'react-three-fiber'
import { apply as applySpring, update, useTransition, useSpring, a } from 'react-spring/three'
import flat from 'lodash-es/flatten'
import { SVGLoader } from './../resources/loaders/SVGLoader'
import * as svgs from '../resources/images/svg/persons'
import { EffectComposer } from './../resources/postprocessing/EffectComposer'
import { ShaderPass } from './../resources/postprocessing/ShaderPass'
import { RenderPass } from './../resources/postprocessing/RenderPass'
import { GlitchPass } from './../resources/postprocessing/GlitchPass'
import { FXAAShader } from './../resources/shaders/FXAAShader'
apply({ EffectComposer, ShaderPass, RenderPass, GlitchPass })
const urls = Object.values(svgs)
const colors = ['#21242d', '#ea5158', '#0d4663', '#EE786E', '#2d4a3e', '#8bd8d2']
const deg = THREE.Math.degToRad
const loaders = urls.map(
url =>
new Promise(res =>
new SVGLoader().load(url, shapes =>
res(
flat(shapes.map((group, index) => group.toShapes(true).map(shape => ({ shape, color: group.color, index }))))
)
)
)
)
function Person({ index }) {
const [shapes, setShape] = useState([])
useEffect(() => void loaders[index].then(setShape), [index])
const [hovered, set] = useState(false)
const hover = e => (e.stopPropagation(), set(true))
const unhover = e => (e.stopPropagation(), set(false))
const props = useSpring({ active: hovered ? 1 : 0, position: hovered ? [0, -50, 0] : [0, 0, 0] })
return (
<a.group
onPointerOver={hover}
onPointerOut={unhover}
position={props.position.interpolate((x, y) => [index * 300 + index * 100, y + -400, -index])}
rotation={[0, deg(180), 0]}>
{shapes.map(({ shape, color, index }) => (
<a.mesh
key={shape.uuid}
scale={props.active.interpolate(a => [1 + a * 0.2, 1 + a * 0.2, 1])}
position={props.active.interpolate(a => [0, 0, a * -index])}>
<meshPhongMaterial
attach="material"
color={color}
opacity={1}
side={THREE.DoubleSide}
depthWrite={false}
transparent
/>
<shapeBufferGeometry attach="geometry" args={[shape]} />
</a.mesh>
))}
</a.group>
)
}
const Scene = React.memo(({ xy }) => {
const { viewport } = useThree()
return (
<>
<Person index={0} />
<Person index={1} />
<Person index={2} />
<Person index={3} />
</>
)
})
const Effect = React.memo(({ factor }) => {
const { gl, scene, camera, size } = useThree()
const composer = useRef()
useEffect(() => void composer.current.setSize(size.width, size.height), [size])
// This takes over as the main render-loop (when 2nd arg is set to true)
useRender(() => composer.current.render(), true)
return (
<effectComposer ref={composer} args={[gl]}>
<renderPass attachArray="passes" args={[scene, camera]} />
<glitchPass attachArray="passes" renderToScreen factor={0} />
</effectComposer>
)
})
export default function App() {
const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2]
const [spring, set] = useSpring(() => ({ xy: [0, 0], config: { mass: 10, tension: 550, friction: 140 } }))
return (
<div class="main" onMouseMove={({ clientX: x, clientY: y }) => set({ xy: calc(x, y) })}>
<Canvas
style={{ background: '#632e55' }}
camera={{
fov: 90,
position: [0, 0, 500],
rotation: [0, 0, deg(180)],
near: 0.1,
far: 20000,
}}>
<ambientLight intensity={0.5} />
<spotLight intensity={0.5} position={[300, 300, 4000]} />
<mesh scale={[10000, 10000, 1]}>
<planeGeometry attach="geometry" args={[1, 1]} />
<meshPhongMaterial attach="material" color="#481d3d" depthTest={false} />
</mesh>
<Scene xy={spring.xy} />
</Canvas>
<a href="https://tympanus.net/codrops" class="top-left" children="Article" />
<a href="https://github.com/drcmda/react-three-fiber" class="top-right" children="Github" />
<a href="https://twitter.com/0xca0a" class="bottom-left" children="Twitter" />
<a
href="https://www.instagram.com/tina.henschel/"
class="bottom-right"
children="Illustrations / Tina Henschel"
/>
</div>
)
}

49
examples/components/Test.js
View File

@@ -1,55 +1,30 @@
import * as THREE from 'three'
import React, { useRef, useMemo } from 'react'
import { Canvas, useRender } from 'react-three-fiber'
import React, { useState, useEffect } from 'react'
import { Canvas, useThree } from 'react-three-fiber'
function useRotate() {
const ref = useRef()
useRender(() => {
ref.current.rotation.x += 0.01
ref.current.rotation.y += 0.01
ref.current.rotation.z += 0.01
})
return ref
}
function Box1(props) {
const ref = useRotate()
const Box = React.memo(props => {
const { viewport } = useThree()
console.log('render', viewport)
return (
<mesh ref={ref} {...props}>
<mesh>
<boxGeometry args={[5, 5, 5]} attach="geometry" />
<meshBasicMaterial attachArray="material" color="red" />
<meshBasicMaterial attachArray="material" color="blue" />
<meshBasicMaterial attachArray="material" color="green" />
<meshBasicMaterial attachArray="material" color="blue" />
<meshBasicMaterial attachArray="material" color="red" />
<meshBasicMaterial attachArray="material" color="blue" />
<meshBasicMaterial attachArray="material" color="green" />
<meshBasicMaterial attachArray="material" color="blue" />
</mesh>
)
}
function Box2(props) {
const ref = useRotate()
const materials = useMemo(() => {
const red = new THREE.MeshBasicMaterial({ color: new THREE.Color('red') })
const green = new THREE.MeshBasicMaterial({ color: new THREE.Color('green') })
const blue = new THREE.MeshBasicMaterial({ color: new THREE.Color('blue') })
return [red, green, blue, red, green, blue]
})
return (
<mesh ref={ref} material={materials} {...props}>
<boxGeometry args={[5, 5, 5]} attach="geometry" />
</mesh>
)
}
})
export default function App() {
const [_, set] = useState(0)
useEffect(() => void setInterval(() => set(s => s + 1), 500), [])
return (
<div class="main">
<Canvas camera={{ position: [0, 0, 20] }}>
<ambientLight intensity={0.5} />
<spotLight intensity={0.5} position={[300, 300, 4000]} />
<Box1 position={[-10, 0, 0]} />
<Box2 position={[10, 0, 0]} />
<Box />
</Canvas>
</div>
)

4
examples/index.js
View File

@@ -3,5 +3,5 @@ import ReactDOM from 'react-dom'
import App from './components/Test'
import './styles.css'
//ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />)
ReactDOM.render(<App />, document.getElementById('root'))
ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />)
//ReactDOM.render(<App />, document.getElementById('root'))

3
examples/package.json
View File

@@ -11,12 +11,13 @@
"printWidth": 120
},
"dependencies": {
"d3-ease": "^1.0.5",
"react": "^16.8.6",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-spring": "^8.0.19",
"three": "^0.103.0",
"three": "^0.104.0",
"three.meshline": "^1.2.0",
"vec-la": "^1.5.0"
},

82
examples/resources/images/svg/p1.svg Normal file
View File

@@ -0,0 +1,82 @@
<svg width="1081px" height="965px" viewBox="0 0 1081 965" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-133">
<polygon id="Fill-3" fill="#D94178" points="827.689398 674.653004 692.509997 750.13336 601.250238 952.911523 673.346363 739.437933"></polygon>
<polygon id="Fill-5" fill="#E34C82" points="797.021193 500.141845 738.697588 597.470899 667.14706 672.405658 632.2231 724.791598 640.408969 671.837168 713.901519 597.470899 783.466149 491.300686"></polygon>
<polygon id="Fill-7" fill="#C81862" points="716.717737 456.661066 702.289927 427.54314 705.432835 405.279521 737.846284 430.184328"></polygon>
<polygon id="Fill-9" fill="#E86E97" points="468.450672 743.366807 442.365963 759.388486 471.637457 729.703024 532.951356 668.453987 587.454825 597.056073 615.043743 567.086367 641.107467 538.798283 641.128452 538.776345 716.717546 456.661066 737.847047 430.184328 705.432645 405.279521 742.910039 405.279521 765.743102 427.54314 783.466435 491.300781 713.901805 597.470994 640.408301 671.837263 632.222432 724.79074"></polygon>
<polygon id="Fill-11" fill="#C50D5F" points="690.240235 259.513908 711.085492 365.399876 705.433026 405.279044 702.290118 427.542663 680.112344 382.861856 692.510379 360.33593 692.510379 315.829676 683.496575 284.288992 670.53005 276.409306 612.512628 313.013935 574.205392 269.074263 574.205392 202.042083 562.614307 187.96338 598.369064 157.142846 592.736628 149.830696 557.004764 181.110027 549.779413 172.356621 585.555154 141.535134 579.924626 134.201999 544.148885 165.502315 536.748981 156.510449 572.808013 125.448594 567.176532 118.115459 531.1175 149.656143 503.81092 116.433836 478.447315 116.433836 391.137414 155.85516 303.259023 183.466016 303.259023 297.253609 306.074764 313.734086 307.777371 323.709362 258.207172 242.598479 270.03767 187.395844 252.008154 172.749604 289.18032 109.667283 394.52069 37.5711572 503.81092 37.5711572 503.81092 0.944589445 538.73488 43.2026387 602.930335 29.6914709 589.419167 55.6006732 636.741162 74.7433225 690.240235 177.835488"></polygon>
<polygon id="Fill-13" fill="#F3BACD" points="680.112249 382.862142 702.290022 427.542949 716.717832 456.660875 641.128738 538.776154 660.402064 500.316303 667.146678 449.611031 649.685652 504.245177 615.044029 567.08713 587.454157 597.056836 532.951642 668.453796 487.876898 686.200021 471.637743 653.480389 549.998701 624.516031 598.433829 544.539266 609.762607 496.933026 649.685652 421.736915 658.70041 421.736915"></polygon>
<path d="M671.381449,360.051971 L671.381449,334.710305 L640.408301,320.347357 L640.408301,337.810291 L648.287988,351.88804 L640.408301,364.832626 L640.408301,377.797243 L671.381449,360.051971 Z M680.111963,294.699507 L667.147346,286.820774 L647.436207,302.318794 L647.436207,313.296559 L666.317504,300.35388 L680.111963,324.560475 L680.111963,294.699507 Z M683.496193,284.288325 L692.509997,315.829962 L692.509997,360.336216 L680.111963,382.862142 L658.700124,421.736915 L649.685366,421.736915 L584.071549,519.174707 L551.111548,461.899374 L490.190632,425.14213 L482.966235,400.890704 L441.056338,380.700737 L440.707232,380.046401 L439.026563,379.71828 L397.750971,371.489487 L397.750971,286.820774 L419.512869,321.548243 L419.512869,331.960379 L451.839519,347.653937 L488.160857,339.1409 L502.108884,333.61911 L488.313472,363.435248 L502.108884,371.489487 L513.938429,386.66034 L554.079904,398.075917 L578.156776,375.549992 L569.294633,360.051971 L599.961598,326.678004 L612.512247,313.014221 L670.529669,276.409592 L683.496193,284.288325 Z" id="Fill-15" fill="#F3BACD"></path>
<polygon id="Fill-17" fill="#EC8EAD" points="680.112249 294.699793 680.112249 324.560761 666.31779 300.354167 647.436493 313.296845 647.436493 302.318127 667.146678 286.820107"></polygon>
<polygon id="Fill-19" fill="#EC8EAD" points="671.381449 334.709923 671.381449 360.05159 640.408301 377.797815 640.408301 364.832245 648.287988 351.888613 640.408301 337.809909 640.408301 320.346975"></polygon>
<polygon id="Fill-21" fill="#F2ACC4" points="667.146869 449.61065 660.402254 500.315921 641.128929 538.775773 641.106991 538.798665 615.04422 567.086748 649.684889 504.244795"></polygon>
<polygon id="Fill-23" fill="#F1A9C1" points="574.205105 269.074645 612.512342 313.013363 599.961693 326.678099 548.994115 243.863654"></polygon>
<polygon id="Fill-25" fill="#F2ACC4" points="609.762703 496.932931 598.433925 544.53917 549.998797 624.515936 471.636885 653.480293 462.360774 634.81838 459.130112 628.269303 544.366361 598.038244 591.667372 531.006064"></polygon>
<polygon id="Fill-27" fill="#F7C7D8" points="548.994401 243.863941 599.961979 326.677432 569.294061 360.052353 520.269458 360.052353 502.109266 371.489869 488.313853 363.434676 502.109266 333.619492 517.955438 327.353705 523.783411 320.652967 536.748981 305.701499 536.748981 284.856242 474.650071 249.778713 431.976147 262.460992 397.750398 286.820202 397.750398 197.545387 415.933483 151.401387 465.351068 123.7457 534.217486 214.24334"></polygon>
<polygon id="Fill-29" fill="#E34C82" points="601.249856 952.911141 598.434116 962.842541 571.979316 962.842541 578.156395 904.476013 672.232849 697.113687 827.689017 674.652622 673.345982 739.437551"></polygon>
<polygon id="Fill-31" fill="#E86E97" points="592.73701 149.830505 598.368491 157.142655 562.614689 187.964143 557.005146 181.109836"></polygon>
<polygon id="Fill-33" fill="#EC92B0" points="591.667658 531.005683 544.366647 598.037863 459.130399 628.269876 446.905963 603.670298 522.386319 585.094231"></polygon>
<polygon id="Fill-35" fill="#E86E97" points="579.924436 134.201999 585.554963 141.535134 549.779222 172.356621 544.148695 165.502315"></polygon>
<polygon id="Fill-37" fill="#F2ACC4" points="551.111644 461.899755 584.071644 519.175088 508.307997 566.213792 465.350782 571.365491 513.938525 542.83704 513.938525 491.300972 513.938525 458.909462 497.895861 451.029775 490.190728 425.142511"></polygon>
<polygon id="Fill-39" fill="#F3BACD" points="569.294251 360.051971 578.156395 375.549992 554.080476 398.075917 513.939002 386.66034 502.108503 371.489487 520.269649 360.051971"></polygon>
<polygon id="Fill-41" fill="#EC8EAD" points="549.779604 172.356621 557.004955 181.110027 562.614498 187.96338 574.204628 202.042083 574.204628 269.074263 548.994592 243.864227 548.994592 201.627162 478.447505 116.433836 503.81111 116.433836 531.117691 149.656143 536.749172 156.510449 544.149076 165.502315"></polygon>
<polygon id="Fill-43" fill="#E86E97" points="567.177009 118.115268 572.807536 125.448403 536.749458 156.510258 531.117023 149.655952"></polygon>
<polygon id="Fill-45" fill="#F1A9C1" points="548.994401 201.627639 548.994401 243.86375 534.217486 214.244103 465.351068 123.746463 478.447315 116.434313"></polygon>
<polygon id="Fill-47" fill="#E86E97" points="536.749077 284.85586 536.749077 305.701117 474.235245 268.790304 410.847694 297.10128 397.750494 286.820774 431.976242 262.460611 474.650166 249.779285"></polygon>
<polygon id="Fill-49" fill="#F1A9C1" points="536.749077 305.701594 523.783506 320.653063 515.99062 311.834796 509.703849 304.719137 487.746413 292.255287 459.435437 292.255287 437.477047 309.564653 434.508692 300.986754 474.235245 268.790781"></polygon>
<polygon id="Fill-51" fill="#D11F69" points="532.951451 668.453987 471.637553 729.703024 442.366058 759.388486 442.345074 759.409471 442.345074 698.881537 462.360488 634.817713 462.360488 686.199258 487.876708 686.199258"></polygon>
<polygon id="Fill-53" fill="#F1A9C1" points="515.990906 311.83451 523.783793 320.652777 517.95582 327.354468 502.108694 333.619301 488.160666 339.14109 451.839328 347.654128 419.513632 331.96057 430.558165 326.678195 482.6818 326.678195"></polygon>
<polygon id="Fill-55" fill="#E97EA1" points="509.704326 304.718851 515.991097 311.83451 482.68199 326.677241 430.557402 326.677241 443.937894 320.238809 443.959832 320.238809 472.532161 318.230019 479.430344 317.750236 481.546919 317.597622 494.142398 311.83451"></polygon>
<polygon id="Fill-57" fill="#F2ACC4" points="513.938906 491.301163 513.938906 542.836277 465.351163 571.364728 451.970672 572.980536 410.847694 582.824183 410.345974 583.129412 372.780825 521.99102 417.330003 540.588072 468.451149 523.126092"></polygon>
<polygon id="Fill-59" fill="#E99FB6" points="513.938906 458.909652 513.938906 491.301163 488.313949 491.301163 470.894891 487.961763 488.313949 475.519852 467.751983 477.157598 476.482496 460.328015 497.896242 451.029012"></polygon>
<polygon id="Fill-61" fill="#F2ACC4" points="513.938906 491.301163 468.451149 523.126092 468.451149 509.330679 450.006712 502.847417 470.873907 487.961763 470.894891 487.961763 488.313949 491.301163"></polygon>
<polygon id="Fill-63" fill="#F8E1EE" points="509.704326 304.718851 494.142398 311.83451 496.128297 300.986468"></polygon>
<polygon id="Fill-65" fill="#F2ACC4" points="490.190632 425.142321 497.895766 451.029584 470.568201 422.303688 454.502645 413.28893 454.502645 405.388259 441.056338 380.700928 482.966235 400.890895"></polygon>
<polygon id="Fill-67" fill="#F2ACC4" points="470.567914 422.304069 497.895479 451.029012 476.482687 460.328015 467.752174 477.157598 434.792173 479.753955 423.74764 433.283741 435.927245 433.283741 454.502359 421.169951 454.502359 413.289311"></polygon>
<polygon id="Fill-69" fill="#E5618D" points="488.313663 475.519947 470.894605 487.961859 470.873621 487.961859 461.836924 485.102241 467.751697 477.157694"></polygon>
<polygon id="Fill-71" fill="#C81862" points="471.637266 653.480293 487.876421 686.199926 462.360202 686.199926 462.360202 634.81838"></polygon>
<polygon id="Fill-73" fill="#EC8EAD" points="480.782605 302.427437 483.729976 309.150113 479.014183 311.94487 476.133581 305.701976 475.784475 300.659014"></polygon>
<polygon id="Fill-75" fill="#D04074" points="480.782605 302.427437 475.784475 300.659014 475.784475 298.803792 488.160571 298.803792 496.128011 300.986182 494.142112 311.834224 481.547586 317.597335 479.430058 317.74995 479.014183 311.94487 483.729976 309.150113"></polygon>
<polygon id="Fill-77" fill="#D04074" points="479.01466 311.944393 479.430535 317.750427 472.532351 318.230209 465.350877 308.517239 466.616625 298.804269 475.783998 298.804269 475.783998 300.659491 476.133104 305.701499"></polygon>
<polygon id="Fill-79" fill="#EC8EAD" points="474.235245 268.790591 434.508692 300.986564 437.477047 309.564462 419.513346 308.517144 419.513346 321.548529 397.750494 286.820107 410.847694 297.101566"></polygon>
<polygon id="Fill-81" fill="#F8E1EE" points="465.350686 308.517525 472.532161 318.230496 443.959832 320.238332 443.937894 320.238332 442.54147 320.34707 466.616434 298.803602"></polygon>
<polygon id="Fill-83" fill="#E99FB6" points="468.450672 509.330965 468.450672 523.126378 417.329526 540.588358 372.780349 521.990352 363.26387 493.614515 372.780349 430.184042 390.787926 454.674881 408.315721 454.674881 408.315721 433.283073 423.747926 433.283073 434.79246 479.754241 419.512869 469.887703 408.315721 477.157884 409.166548 485.102432 381.838029 501.167034 421.695259 507.060822 450.006235 502.847703"></polygon>
<polygon id="Fill-85" fill="#E86E97" points="467.752078 477.157407 461.837306 485.101955 448.17257 490.450145 435.076323 490.450145 415.933674 495.666706 408.31534 495.514091 409.166167 485.101955 426.344856 485.101955 434.792078 479.754718"></polygon>
<polygon id="Fill-87" fill="#F2ACC4" points="454.502645 413.289216 454.502645 421.169856 435.926577 433.283646 423.747926 433.283646 408.315721 433.283646 402.68424 433.283646 397.903585 430.184614 371.841768 413.289216 385.221306 403.423631 418.465551 403.423631 418.465551 409.905939 404.386847 418.06987 412.833116 422.303974 433.962617 422.303974 439.026563 418.06987 434.224924 409.905939 434.224924 403.423631 437.323956 403.423631"></polygon>
<polygon id="Fill-89" fill="#F3BACD" points="454.502645 405.388354 454.502645 413.289025 437.323956 403.42344 434.224924 403.42344 418.465551 403.42344 385.221306 403.42344 375.661904 392.160477 380.441605 360.052258 380.441605 342.088557 380.441605 333.007984 380.441605 320.347643 357.194575 293.71829 331.852909 286.820107 320.24084 291.055164 320.24084 226.139559 356.365687 184.73329 415.933101 151.402245 397.750971 197.546246 397.750971 286.820107 397.750971 371.489774 439.026563 379.718566 441.056338 380.701023"></polygon>
<polygon id="Fill-91" fill="#E5618D" points="448.172188 490.449764 438.328542 496.933026 428.593633 496.933026 415.933292 495.667278 435.075941 490.449764"></polygon>
<polygon id="Fill-93" fill="#EC8EAD" points="487.746413 292.255574 509.704803 304.718469 496.12782 300.986087 488.161334 298.803697 475.784284 298.803697 466.616911 298.803697 442.540993 320.347166 443.937417 320.238428 430.557879 326.677813 419.513346 331.960189 419.513346 321.548052 419.513346 308.517621 437.477047 309.563985 459.435437 292.255574"></polygon>
<polygon id="Fill-95" fill="#E34C82" points="434.225115 409.906035 439.026754 418.069966 433.962808 422.304069 412.833307 422.304069 404.387038 418.069966 418.465742 409.906035"></polygon>
<polygon id="Fill-97" fill="#E99FB6" points="434.792364 479.754432 426.345142 485.101669 409.166453 485.101669 408.315626 477.157121 419.512774 469.887894"></polygon>
<polygon id="Fill-99" fill="#E34C82" points="434.508215 764.211682 442.344978 759.410043 442.365963 759.388105 468.450672 743.366425 632.222432 724.791312 456.052637 772.375613 434.508215 796.319902"></polygon>
<polygon id="Fill-101" fill="#E34C82" points="434.508215 796.319997 399.868499 786.737703 342.701904 711.258301 373.107516 739.437647"></polygon>
<path d="M442.344883,759.409852 L434.508119,764.211491 L434.508119,796.319711 L373.107421,739.438314 C375.377564,737.734753 418.879423,665.507951 418.879423,665.507951 L442.344883,698.881919 L442.344883,759.409852 Z" id="Fill-103" fill="#E86E97"></path>
<polygon id="Fill-105" fill="#F2ACC4" points="418.465456 409.905844 434.224828 409.905844 434.224828 403.423536 418.465456 403.423536"></polygon>
<polygon id="Fill-107" fill="#E5618D" points="421.695641 507.060917 381.838411 501.167129 409.165976 485.102527 408.316103 495.514663"></polygon>
<polygon id="Fill-108" fill="#F2B0C7" points="391.137318 155.855351 478.447219 116.434027 465.350973 123.746177 415.933387 151.401864 356.365973 184.732908 320.241126 226.140131 320.241126 291.054782 303.258928 297.2538 303.258928 183.466207"></polygon>
<polygon id="Fill-109" fill="#E97EA1" points="421.695641 507.060917 408.316103 495.514663 415.933483 495.667278 428.59287 496.933026 438.327779 496.933026 448.172379 490.449764 461.837115 485.102527 470.873811 487.962145 450.006616 502.847798"></polygon>
<polygon id="Fill-110" fill="#EC92B0" points="410.847599 583.959827 410.345878 583.129984 410.847599 582.824755 451.970576 572.980155 465.351068 571.365301 508.308283 566.214555 584.070976 519.174898 649.685747 421.737106 609.762703 496.933217 591.667372 531.005396 522.386987 585.093944 446.906631 603.670012 421.695641 589.897491"></polygon>
<polygon id="Fill-111" fill="#E99FB6" points="410.345497 583.129794 410.847217 583.959636 368.043571 537.205177 307.777944 400.890704 317.490914 371.729856 335.367815 375.549992 345.95355 442.014636 363.26387 493.614611 372.780349 521.990448"></polygon>
<polygon id="Fill-112" fill="#E99FB6" points="408.315817 433.28355 408.315817 454.675358 390.788022 454.675358 372.780444 430.184519 397.903681 430.184519 402.684335 433.28355"></polygon>
<polygon id="Fill-113" fill="#E34C82" points="421.695641 589.89711 407.486261 643.680428 342.702286 711.258206 399.039039 640.297152 410.847599 595.703144"></polygon>
<polygon id="Fill-114" fill="#EC8EAD" points="397.903585 430.184519 372.780349 430.184519 363.26387 413.28912 365.839242 403.423536 371.841768 413.28912"></polygon>
<polygon id="Fill-115" fill="#F2B0C7" points="375.661618 392.160286 385.22102 403.424203 371.841482 413.288834 365.838956 403.424203 363.263584 399.211084 367.192458 387.663877 380.442273 360.052067"></polygon>
<polygon id="Fill-116" fill="#E99FB6" points="380.441987 342.088271 380.441987 360.051971 345.953932 377.798196 335.367243 375.549992 317.491295 371.729856 322.423611 356.887125 339.885591 359.003699"></polygon>
<polygon id="Fill-117" fill="#E97EA1" points="380.441987 333.008079 380.441987 342.088652 339.885591 359.004081 322.423611 356.886552 322.423611 345.973649 338.182984 347.653365 349.337209 343.79126 362.629947 339.185158 370.182465 336.564955"></polygon>
<polygon id="Fill-118" fill="#E97EA1" points="380.441987 320.347357 380.441987 333.007698 372.78073 327.354278 363.263298 320.347357"></polygon>
<polygon id="Fill-119" fill="#E86E97" points="357.194861 293.718004 380.441891 320.347357 350.450246 305.701117 306.074669 313.733418 303.258928 297.253895 320.241126 291.054878 331.853195 286.820774"></polygon>
<polygon id="Fill-120" fill="#F2ACC4" points="380.441987 360.051971 367.192172 387.663781 363.263298 399.210989 365.83867 403.424108 363.263298 413.288739 372.78073 430.184137 363.263298 493.614611 345.953932 442.014636 335.367243 375.549992 345.953932 377.797243"></polygon>
<polygon id="Fill-121" fill="#F1A9C1" points="380.441987 320.347357 363.263298 320.347357 355.645918 320.347357 348.332813 320.347357 306.074764 313.733418 350.450342 305.702071"></polygon>
<polygon id="Fill-122" fill="#F8E1EE" points="380.441987 333.008079 370.182465 336.564955 372.78073 327.353705"></polygon>
<path d="M373.107516,739.437838 L342.701904,711.258492 L407.485879,643.679761 L421.695259,589.897396 L446.906249,603.669916 L459.130685,628.269494 L462.360393,634.817617 L442.344978,698.881442 L418.879518,665.507474 C418.879518,665.507474 375.37766,737.73523 373.107516,739.437838" id="Fill-123" fill="#D94178"></path>
<polygon id="Fill-124" fill="#D04074" points="372.780539 327.353992 370.182275 336.565241 362.629756 339.18449 360.578042 333.291656 355.645727 323.709362 355.645727 320.34707 363.263107 320.34707"></polygon>
<polygon id="Fill-125" fill="#D04074" points="360.578042 333.291275 362.629756 339.185063 349.337018 343.791164 342.54948 330.759779 345.517836 321.547576 348.332622 320.347643 355.645727 320.347643 355.645727 323.708981 353.265892 328.64225 355.645727 333.989487"></polygon>
<polygon id="Fill-126" fill="#F1A9C1" points="355.645822 323.709076 360.578138 333.29137 355.645822 333.989582 353.265987 328.642346"></polygon>
<polygon id="Fill-127" fill="#F8E1EE" points="342.549099 330.759493 349.336636 343.790878 338.183365 347.653937 322.423039 345.973268 322.423039 331.327028 345.517454 321.548243"></polygon>
<polygon id="Fill-128" fill="#E97EA1" points="317.491295 371.730046 307.777371 400.890895 307.777371 323.708885 306.074764 313.733609 348.332813 320.347547 345.518026 321.548434 322.423611 331.327219 322.423611 345.973459 322.423611 356.886362"></polygon>
<polygon id="Fill-129" fill="#E86E97" points="598.433925 962.842637 601.249666 952.911237 692.510379 750.133074 827.68978 674.652718 672.232658 697.113782 578.156204 904.476108 571.979125 962.842637 147.493426 964.053891 165.472365 873.492968 274.818325 701.413701 322.423611 643.112988 410.847599 595.70324 399.039039 640.297247 342.702286 711.258301 399.867927 786.737703 434.508596 796.319997 456.053019 772.374755 632.222813 724.791407 667.146774 672.405467 738.698256 597.470708 797.020907 500.141654 948.810508 599.173316 1012.45941 665.507284 1060.32796 782.808829 1080.60568 917.987276 1080.60568 962.842637"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

100
examples/resources/images/svg/p2.svg Normal file
View File

@@ -0,0 +1,100 @@
<svg width="1081px" height="965px" viewBox="0 0 1081 965" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-192">
<polygon id="Fill-3" fill="#962151" points="913.28088 823.398798 913.28088 964.575564 758.332277 964.575564 796.69017 838.59588 734.863249 801.969274 776.344173 767.107819 711.665671 649.575564 828.772043 690.288031 892.934882 742.112755"></polygon>
<polygon id="Fill-5" fill="#E34C82" points="655.234783 660.023544 651.444478 637.375911 648.776284 621.263658 648.776284 558.575564 703.569124 635.301319 711.635439 649.96115 711.665399 649.96115 776.3439 767.350571 734.862977 802.169353 796.689898 838.751124 758.332913 964.575564 637.830245 964.575564 665.81768 755.213585 668.15269 737.683072"></polygon>
<polygon id="Fill-7" fill="#F0ABC2" points="695.32151 266.217365 672.276451 260.940896 550.288528 253.117887 446.705603 253.117887 381.754744 254.663969 335.361403 258.454274 335.361403 233.559002 350.674238 231.80139 372.173215 229.344727 406.9832 225.34289 516.933839 223.371931 635.100589 229.253941 694.411836 237.986624 721.156415 241.928542 736.044372 244.111939 740.745259 276.587823"></polygon>
<polygon id="Fill-9" fill="#E97EA1" points="740.74535 276.587732 707.663017 334.837694 695.321601 290.656802 695.321601 266.217274"></polygon>
<polygon id="Fill-11" fill="#E97EA1" points="721.156415 209.665097 721.156415 241.928542 694.411836 237.986624 695.32151 231.80139 695.32151 205.966485 702.478152 205.966485 708.208549 231.80139 713.939854 207.724097 719.640292 205.601526"></polygon>
<polygon id="Fill-13" fill="#FADEEA" points="719.215687 390.449421 719.215687 432.900844 676.945836 492.182133 687.134722 458.948188 661.693827 506.463641 648.775921 555.950961 648.775921 506.463641 664.726072 446.606771 679.311713 446.606771 697.50518 411.371908 697.50518 355.032079 682.525529 339.476846 668.152327 354.456497 668.152327 337.141836 658.570797 289.898741 695.321782 290.656802 707.662291 334.837694 712.575617 352.394753"></polygon>
<polygon id="Fill-15" fill="#F3BACD" points="713.939673 207.72437 708.209275 231.801662 702.47797 205.965849"></polygon>
<path d="M697.505089,355.032261 L697.505089,411.37209 L679.311622,446.606953 L664.726889,446.606953 L668.152236,433.689954 L668.152236,354.455771 L682.525438,339.477028 L697.505089,355.032261 Z M692.80511,405.398387 L692.80511,371.163983 L687.801907,362.370474 L687.801907,395.513633 L678.128683,415.223222 L684.011601,422.136558 L692.80511,405.398387 Z" id="Fill-17" fill="#F3BACD"></path>
<polygon id="Fill-19" fill="#E34C82" points="695.32151 266.217365 695.32151 290.656893 658.571433 289.898831 597.197533 283.319587 534.399204 276.587823 440.247104 281.955077 414.927862 281.955077 381.754744 276.587823 381.754744 254.663969 446.705603 253.117887 550.288528 253.117887 672.276451 260.940896"></polygon>
<polygon id="Fill-21" fill="#F3BACD" points="695.32151 205.966303 695.32151 231.801208 681.737236 228.556525 668.152054 198.931314 695.32151 198.931314"></polygon>
<polygon id="Fill-23" fill="#EC8EAD" points="692.805382 371.16362 692.805382 405.398024 684.010965 422.136195 678.128956 415.222859 687.801271 395.51327 687.801271 362.370111"></polygon>
<polygon id="Fill-25" fill="#F7C7D8" points="668.152236 354.456043 668.152236 433.689319 664.726889 446.607225 648.77583 506.464095 601.836867 552.221028 561.355495 566.897455 560.567474 566.897455 540.009038 544.216447 558.020026 529.721592 558.020026 501.369198 544.618231 501.369198 544.618231 494.85078 562.508474 485.601526 576.335146 481.932874 591.284837 495.729586 598.743796 495.729586 598.743796 479.26468 606.172795 477.232895 608.295366 484.935159 630.067608 497.064137 630.067608 392.783977 642.044974 387.599202"></polygon>
<polygon id="Fill-27" fill="#F7C7D8" points="658.570979 289.898831 668.152508 337.141927 653.476989 335.777417 624.972983 321.67748 617.695596 318.068746 581.308662 318.068746 562.811063 325.680225 555.079747 338.598131 551.077003 339.476937 527.000618 339.476937 499.133928 320.404664 468.599044 314.824063 468.599044 300.026891 566.480623 293.507565 597.197079 293.507565 597.197079 283.319587"></polygon>
<polygon id="Fill-29" fill="#E97EA1" points="655.234783 644.917287 668.15269 713.022044 665.81768 728.395705 648.776284 700.135005"></polygon>
<polygon id="Fill-31" fill="#E99FB6" points="648.776012 700.135186 665.817408 728.395887 611.782629 731.154866 651.444205 625.056267 655.234511 644.917469"></polygon>
<polygon id="Fill-33" fill="#E34C82" points="658.964626 110.298172 624.973528 110.298172 624.973528 84.8572771 626.003946 80.1872574 645.077127 98.9572141"></polygon>
<polygon id="Fill-35" fill="#F0ABC2" points="653.476717 335.777599 627.065323 333.321844 624.518782 333.321844 612.783814 333.321844 624.973619 321.677662"></polygon>
<polygon id="Fill-37" fill="#F3BACD" points="648.776012 610.925826 651.444205 625.055723 611.782629 731.155229 576.608592 732.974576 590.344478 649.646863 580.671255 630.877814 528.971486 728.820219 488.18689 725.272312 511.051284 699.529101 480.788758 642.006333 496.496511 585.970636 563.690686 585.970636 612.115812 566.897455 648.776012 506.464095 648.776012 555.950507"></polygon>
<polygon id="Fill-39" fill="#E97EA1" points="456.409512 74.0015694 438.094392 89.3752306 433.000403 103.839219 461.71594 103.839219 462.170777 109.509697 542.373644 119.697676 624.973255 111.874666 624.973255 110.297718 658.964353 110.297718 645.076855 98.9567601 626.004582 80.1868035 627.975541 71.24259 660.147292 91.5286689 689.469278 122.427604 703.176113 161.14864 719.640111 205.601889 713.939673 207.72446 702.47797 205.96594 695.321328 205.96594 695.321328 198.930951 668.151873 198.930951 681.737054 228.556162 695.321328 231.800845 694.411655 237.986987 635.100407 229.254304 516.933657 223.371387 406.983018 225.342346 372.173033 229.344182 371.475798 223.371387 390.275714 190.410707 365.017299 190.410707 363.561095 198.930951 371.779023 198.930951 357.405821 223.371387 350.674056 223.371387 350.674056 196.777513 394.85404 106.779769 429.300883 79.0047728 453.952849 66.4817845"></polygon>
<polygon id="Fill-41" fill="#F3BACD" points="630.067426 392.783705 630.067426 497.063865 608.296092 484.934887 606.173521 477.23353 599.501675 452.853013 599.501675 419.98312 615.634306 399.060633"></polygon>
<polygon id="Fill-43" fill="#F0ABC2" points="629.61259 63.7527645 627.974814 71.24259 626.003855 80.1877113 624.973437 84.8568232 624.973437 110.298626 624.973437 111.874666 542.373825 119.697676 462.17005 109.509697 470.964467 78.3983239 468.962641 70.9992842 494.828413 67.269805 548.438315 60.598867 542.950315 45.5592974 532.003368 42.2238284 523.968828 34.0059011 567.087526 34.0059011 604.29244 46.9238074"></polygon>
<polygon id="Fill-45" fill="#F3BACD" points="624.518328 339.780434 640.770795 342.114536 653.476263 348.573943 653.476263 359.338411 638.041775 381.443837 599.501403 383.929551 580.671528 382.413429 564.024142 367.797828 566.480805 351.060565 576.760477 364.704757 598.623505 371.314869 618.877809 367.070634 629.430746 364.03839 628.824297 353.455493 620.757982 344.510372 611.084759 339.780434"></polygon>
<polygon id="Fill-47" fill="#E97EA1" points="624.973165 321.677389 612.78336 333.321571 579.247099 333.321571 562.811244 325.680134 581.307936 318.068655 617.69487 318.068655"></polygon>
<polygon id="Fill-49" fill="#FCEBF2" points="618.877899 355.335485 606.051687 364.038208 604.293166 364.038208 609.265503 356.488464 609.265503 349.453475"></polygon>
<polygon id="Fill-51" fill="#E34C82" points="653.476717 359.338411 653.476717 348.573943 640.771249 342.114536 624.518782 339.780434 624.518782 333.321935 627.065323 333.321935 653.476717 335.77769 668.152236 337.1422 668.152236 354.455953 642.044974 387.599111 630.067608 392.783886 615.633579 399.060814 611.419304 399.060814 611.419304 392.783886 638.042229 381.443837"></polygon>
<polygon id="Fill-53" fill="#962151" points="602.321935 346.905936 603.474914 354.062578 597.53117 356.729864 592.043171 355.911884 591.739946 348.330365 594.80215 345.541426"></polygon>
<polygon id="Fill-55" fill="#F3BACD" points="597.197533 283.319496 597.197533 293.507475 566.481077 293.507475 468.599498 300.0268 468.599498 314.823972 448.676562 319.645604 440.247104 281.954986 534.399204 276.587732"></polygon>
<path d="M600.472538,344.085676 L609.266047,349.452931 L609.266047,356.48792 L604.292803,364.038572 L591.285019,364.038572 L587.554632,358.24644 L585.219622,352.303604 L585.977683,345.844197 L600.472538,344.085676 Z M603.474823,354.062124 L602.321844,346.905482 L594.802059,345.54188 L591.739856,348.330819 L592.04308,355.91143 L597.531079,356.730318 L603.474823,354.062124 Z" id="Fill-57" fill="#D04074"></path>
<polygon id="Fill-59" fill="#E99FB6" points="618.877899 367.070271 598.622688 371.315414 576.75966 364.705302 591.284474 364.038027 604.293166 364.038027 606.051687 364.038027 618.877899 355.335304 629.430837 364.038027"></polygon>
<polygon id="Fill-61" fill="#E99FB6" points="590.344206 408.642888 590.344206 452.852832 590.101808 452.852832 565.055832 428.595784 565.055832 415.223041 557.050343 408.642888 571.029535 408.642888"></polygon>
<polygon id="Fill-63" fill="#E99FB6" points="580.671618 630.87736 590.343934 649.647317 576.608048 732.974122 528.971849 728.820673"></polygon>
<polygon id="Fill-65" fill="#FCEBF2" points="587.555086 358.246167 591.284565 364.038299 575.03119 354.334209 585.978137 345.844832 585.220076 352.303331"></polygon>
<polygon id="Fill-67" fill="#F3BACD" points="586.280998 479.264317 598.744068 479.264317 598.744068 495.730131 591.28511 495.730131 576.335418 481.932511"></polygon>
<polygon id="Fill-69" fill="#F0ABC2" points="579.246917 333.321753 555.079747 338.598222 562.811063 325.680315"></polygon>
<polygon id="Fill-71" fill="#E97EA1" points="588.251867 339.780434 611.084486 339.780434 620.758617 344.510372 628.824024 353.455493 629.430473 364.03839 618.877536 355.335667 609.265139 349.452749 600.472538 344.085495 585.977683 345.844923 575.030736 354.3343 574.394328 354.061942 566.48144 351.060565 576.305368 344.510372"></polygon>
<polygon id="Fill-73" fill="#F3BACD" points="576.760023 364.704848 566.481259 351.060656 574.395054 354.062033 575.031462 354.33439 591.284837 364.038481"></polygon>
<polygon id="Fill-75" fill="#F7C7D8" points="571.029172 408.642888 559.567469 387.023167 573.666498 395.088574 590.982067 399.060451 611.41885 399.060451 615.634033 399.060451 599.501403 419.982938 599.501403 452.852832 590.343843 452.852832 590.343843 408.642888"></polygon>
<polygon id="Fill-77" fill="#F7C7D8" points="583.067182 389.661219 564.085695 381.443292 555.079747 362.673335 555.079747 347.785378 579.550142 339.780797 588.251957 339.780797 576.305459 344.510735 566.480623 351.06002 564.023961 367.798192 580.671346 382.413792 599.502129 383.929914 638.042502 381.443292 611.418669 392.783342 598.50167 392.783342"></polygon>
<polygon id="Fill-79" fill="#E5618D" points="546.953241 461.858961 586.280726 479.264408 561.355495 476.808653 552.532934 476.808653 508.079685 476.808653 499.618452 471.04648 508.806879 465.953399 523.179173 460.676023 532.974049 464.922073 534.945008 465.77092"></polygon>
<polygon id="Fill-81" fill="#E97EA1" points="561.355767 476.808471 586.280998 479.264226 576.335418 481.933328 562.508746 485.60198 544.617596 494.850326 530.669271 494.850326 552.532299 476.808471"></polygon>
<polygon id="Fill-83" fill="#F3BACD" points="540.008675 544.215993 560.568019 566.897001 509.68623 566.897001 509.68623 522.686149 539.614665 501.369652 544.617868 501.369652 558.02057 501.369652 558.02057 529.721138"></polygon>
<polygon id="Fill-85" fill="#E34C82" points="557.050524 419.98312 557.050524 428.595057 550.288801 428.595057 543.527077 425.259588 547.832138 419.98312"></polygon>
<polygon id="Fill-87" fill="#E97EA1" points="552.53248 476.808471 530.669452 494.850326 522.451525 494.850326 508.65572 488.846664 494.43413 479.17344 508.079231 476.808471"></polygon>
<polygon id="Fill-89" fill="#E97EA1" points="542.950315 45.5592066 548.438315 60.5987763 494.828413 67.2697142 468.962641 70.9991934 463.747907 51.6845221 485.245976 41.8297274 523.968828 34.0058103 532.003368 42.2237376"></polygon>
<polygon id="Fill-91" fill="#F7C7D8" points="565.055468 415.223041 565.055468 428.594876 557.050888 428.594876 557.050888 419.982938 547.831593 419.982938 543.526532 425.260315 539.615482 425.260315 539.615482 411.371908 544.617777 397.301931 544.617777 357.609487 559.567469 387.023167 571.029172 408.642888 557.050888 408.642888"></polygon>
<polygon id="Fill-93" fill="#E97EA1" points="544.617959 449.214502 544.617959 457.340735 534.823991 460.676204 529.78992 455.643041 529.78992 449.122808"></polygon>
<polygon id="Fill-95" fill="#EC8EAD" points="544.617959 444.333042 544.617959 449.214592 529.78992 449.122899 528.243838 425.805483 528.637849 425.472299 528.183012 425.108248 528.183012 425.077381 521.876125 419.892606 529.365043 411.371454 539.614755 411.371454 539.614755 425.259861 539.614755 437.206359"></polygon>
<polygon id="Fill-97" fill="#EC8EAD" points="544.617959 357.609578 544.617959 397.302022 539.614755 411.371999 529.365043 411.371999 524.150308 397.574379 524.150308 363.794812 524.150308 363.764852 528.486236 356.488373 544.041469 356.488373"></polygon>
<polygon id="Fill-99" fill="#F3BACD" points="565.055468 428.59533 590.102353 452.853286 590.343843 452.853286 599.501403 452.853286 606.173249 477.232895 598.743342 479.26468 586.28118 479.26468 546.953695 461.859234 534.945462 465.770284 532.973595 464.922345 534.823809 460.676295 544.617777 457.340826 544.617777 449.214592 544.617777 444.333042 539.615482 437.206359 539.615482 425.259861 543.526532 425.259861 550.288256 428.59533 557.050888 428.59533"></polygon>
<polygon id="Fill-101" fill="#E99FB6" points="532.973686 464.922073 523.179718 460.676023 508.807423 465.953399 499.618996 471.04648 480.789121 481.508632 497.557252 432.901026 511.051648 432.901026 522.75484 430.141139 528.243748 425.805211 529.789829 449.123534 529.789829 455.64286 534.8239 460.676023"></polygon>
<polygon id="Fill-103" fill="#E34C82" points="528.183466 425.077381 528.183466 425.108248 528.243384 425.805483 522.755385 430.141411 512.627325 424.592585 512.627325 419.740994 521.876579 419.892606"></polygon>
<polygon id="Fill-105" fill="#F0ABC2" points="527.0008 339.477209 521.421107 339.477209 499.134109 332.350527 499.134109 320.404028"></polygon>
<polygon id="Fill-107" fill="#E99FB6" points="524.150399 363.795266 524.150399 397.574833 510.68687 412.554484 499.619178 398.242108 509.988728 387.599293"></polygon>
<polygon id="Fill-109" fill="#F3BACD" points="512.627507 419.741085 512.627507 424.592676 522.754659 430.141502 511.051466 432.900481 504.622926 423.683003 504.622926 412.554484 510.686507 412.554484 524.150036 397.574833 529.365678 411.371545 521.87676 419.892697"></polygon>
<polygon id="Fill-111" fill="#E97EA1" points="504.622654 423.682821 511.051194 432.9003 497.557705 432.9003 488.186799 420.77223 494.646206 403.366783 499.618542 398.242834 510.687143 412.554302 504.622654 412.554302"></polygon>
<polygon id="Fill-113" fill="#E99FB6" points="480.788667 642.006605 511.051194 699.528465 488.186799 725.272584 402.768289 696.92019 414.654869 657.471052 438.094846 670.782061 455.711823 670.782061 455.711823 620.901639 455.711823 542.942087 496.49642 585.97"></polygon>
<polygon id="Fill-115" fill="#E34C82" points="508.079412 476.808471 494.434312 479.17344 480.788304 481.50845 499.619087 471.046299"></polygon>
<polygon id="Fill-117" fill="#F7C7D8" points="499.618724 525.233416 499.618724 555.950779 471.752942 538.575292 471.752942 522.504396 488.186981 533.056426 488.186981 519.168927"></polygon>
<path d="M471.752669,538.575564 L499.618452,555.951052 L499.618452,525.233689 L488.187616,519.1692 L488.187616,533.056698 L471.752669,522.504669 L471.752669,538.575564 Z M500.893084,566.897091 L443.370316,529.93276 L438.094755,422.136467 L463.141639,432.900935 L497.557615,432.900935 L480.788576,481.508541 L480.788576,495.730131 L490.612504,495.730131 L494.433677,479.173531 L508.655266,488.846754 L522.451979,494.850417 L530.668999,494.850417 L544.618231,494.850417 L544.618231,501.369743 L539.615028,501.369743 L509.685685,522.68624 L509.685685,566.897091 L500.893084,566.897091 Z" id="Fill-119" fill="#F3BACD"></path>
<polygon id="Fill-121" fill="#F3BACD" points="488.187162 420.772139 497.557161 432.900209 463.141186 432.900209 438.094301 422.136649 419.59761 367.070544 445.91731 403.366692 494.645661 403.366692"></polygon>
<polygon id="Fill-123" fill="#F7C7D8" points="495.889789 369.405554 488.187525 385.931286 455.711642 385.931286 442.005715 378.319808 427.724206 364.614789 421.872156 348.967862 421.872156 337.415374 441.763317 352.606556 441.763317 361.551677 456.864621 367.797738"></polygon>
<polygon id="Fill-125" fill="#EC8EAD" points="494.43404 479.173804 490.612867 495.729496 480.788939 495.729496 480.788939 481.507906"></polygon>
<polygon id="Fill-127" fill="#FCEBF2" points="480.788667 362.400615 486.79233 355.45732 489.096472 344.510372 504.622654 355.45732 491.189084 360.156391 484.03335 362.67388"></polygon>
<polygon id="Fill-129" fill="#962151" points="480.788667 342.569645 482.850412 347.391277 480.212177 353.455766 474.633392 353.455766 470.236638 349.453022 471.842638 342.569645"></polygon>
<polygon id="Fill-131" fill="#E99FB6" points="470.38825 330.198269 515.356255 347.390369 515.356255 364.220234 504.410215 382.231222 488.186799 385.931649 495.889971 369.405917 491.189084 360.156663 504.622654 355.456684 489.096472 344.510645 486.36836 342.569645 470.236638 335.807921"></polygon>
<polygon id="Fill-133" fill="#E99FB6" points="431.059585 330.198269 470.387978 330.198269 470.236365 335.807921 453.953031 339.477482 441.763226 352.606919 421.872065 337.414829"></polygon>
<polygon id="Fill-135" fill="#D04074" points="482.850866 347.390823 480.789121 342.569191 486.367906 342.569191 489.096926 344.510191 486.792784 355.457138 480.789121 362.400433 470.236184 361.551586 465.961082 354.880648 462.625613 345.783007 467.597949 342.569191 471.843092 342.569191 470.236184 349.452568 474.632938 353.45622 480.212631 353.45622"></polygon>
<polygon id="Fill-137" fill="#FCEBF2" points="465.960628 354.880648 470.236638 361.551586 462.291975 360.91427 452.46714 352.394934 462.625159 345.783007"></polygon>
<polygon id="Fill-139" fill="#F3BACD" points="470.236638 361.551314 480.788667 362.401069 484.03335 362.673426 491.189084 360.156845 495.889971 369.40519 456.864803 367.798282 462.291975 360.914906"></polygon>
<polygon id="Fill-141" fill="#E97EA1" points="470.964467 78.3981423 462.17005 109.510424 461.715214 103.839037 460.199999 85.6455699 456.409693 74.0013878 453.953031 66.481603 451.982072 57.081645 463.747907 51.6844313 468.962641 71.0000104"></polygon>
<polygon id="Fill-143" fill="#E99FB6" points="462.291975 360.914724 456.863895 367.798101 441.763499 361.551132 441.763499 352.606919 452.46714 352.39448"></polygon>
<polygon id="Fill-145" fill="#E34C82" points="460.199636 85.645933 461.715758 103.8394 433.000221 103.8394 438.09421 89.3745043 456.40933 74.0017509"></polygon>
<polygon id="Fill-147" fill="#E97EA1" points="443.370588 529.933214 500.892448 566.897545 509.685957 566.897545 560.567747 566.897545 561.355767 566.897545 601.837139 552.221119 648.776103 506.463278 612.115903 566.897545 563.690777 585.970726 496.496601 585.970726 455.712005 542.941906"></polygon>
<polygon id="Fill-149" fill="#E97EA1" points="455.711823 620.901639 455.711823 670.782061 438.094846 670.782061 414.654869 657.471052 438.094846 644.857278 436.335418 579.238236"></polygon>
<polygon id="Fill-151" fill="#E97EA1" points="455.711823 542.941997 455.711823 620.901548 436.335418 579.238145 442.127549 538.575201 443.370407 529.933304"></polygon>
<polygon id="Fill-153" fill="#E97EA1" points="453.952849 339.477209 470.237092 335.807649 486.367906 342.569373 480.789121 342.569373 471.843092 342.569373 467.597949 342.569373 462.625613 345.783189 452.466686 352.395116 441.763045 352.606647"></polygon>
<polygon id="Fill-155" fill="#E97EA1" points="470.085025 323.041809 434.576897 323.041809 448.676834 319.645513 468.598863 314.823881 499.133746 320.404482 499.133746 332.350981"></polygon>
<polygon id="Fill-157" fill="#F7C7D8" points="440.247195 281.955077 448.676653 319.645695 434.576716 323.04199 429.300247 323.04199 414.927953 326.377459 414.927953 281.955077"></polygon>
<polygon id="Fill-159" fill="#F7C7D8" points="438.094573 422.136649 443.371042 529.932941 413.441699 472.987571 410.257843 448.031472 405.497945 410.583252 405.22468 408.430722 405.22468 345.056812 419.596974 367.070544"></polygon>
<polygon id="Fill-161" fill="#E34C82" points="442.12764 538.575564 436.335509 584.963667 434.576988 599.008522 414.65496 674.211311 402.76838 719.21471 398.765636 734.262104 376.478639 964.575564 271.622897 964.575564 258.31098 757.472726 328.750747 749.413065 293.515884 708.353535 361.984691 612.464076 372.56668 597.659032"></polygon>
<polygon id="Fill-163" fill="#E34C82" points="436.335599 579.238508 438.09412 644.856643 414.655051 657.471324 434.577079 591.549966"></polygon>
<polygon id="Fill-165" fill="#E99FB6" points="436.335599 382.62623 457.470525 391.722964 488.581899 391.722964 509.989182 387.599475 499.618724 398.24229 494.646388 403.367146 445.918037 403.367146 419.597428 367.07009"></polygon>
<path d="M427.724206,364.614426 L442.005715,378.320352 L455.711642,385.930923 L488.187525,385.930923 L504.410033,382.231403 L515.356073,364.219508 L515.356073,347.390551 L470.388068,330.19845 L431.059675,330.19845 L421.872156,337.415011 L421.872156,348.968407 L427.724206,364.614426 Z M457.47107,391.722147 L436.335236,382.626321 L419.597065,367.070181 L405.224771,345.056449 L405.224771,342.11499 L405.224771,328.621502 L414.927953,326.377278 L429.300247,323.041809 L434.576716,323.041809 L470.084844,323.041809 L499.133565,332.350981 L521.42147,339.477663 L527.001163,339.477663 L551.07664,339.477663 L555.079384,338.597949 L579.246554,333.321481 L612.783723,333.321481 L624.518691,333.321481 L624.518691,339.780888 L611.085122,339.780888 L588.251594,339.780888 L579.549779,339.780888 L555.079384,347.785469 L555.079384,362.673426 L564.085332,381.443383 L583.066819,389.66131 L598.501307,392.783432 L611.419213,392.783432 L611.419213,399.06036 L590.981522,399.06036 L573.666861,395.088483 L559.567832,387.023076 L544.61814,357.609396 L544.041651,356.488192 L528.486418,356.488192 L524.15049,363.764671 L524.15049,363.795538 L509.988819,387.598657 L488.581535,391.722147 L457.47107,391.722147 Z" id="Fill-167" fill="#E34C82"></path>
<polygon id="Fill-169" fill="#FADEEA" points="414.927771 281.955077 414.927771 326.377459 405.224589 328.620775 394.854131 326.377459 394.854131 343.085671 389.669356 342.115171 381.754653 342.115171 381.754653 407.854959 389.244479 422.712957 396.491906 437.116118 405.224589 476.292899 386.242194 448.032199 386.242194 476.292899 361.984238 395.513542 361.984238 362.370383 366.168553 332.351162 366.168553 332.321203 367.078227 325.680225 381.754653 276.587823"></polygon>
<polygon id="Fill-171" fill="#F3BACD" points="405.497673 410.583616 410.258478 448.031835 402.010591 448.031835 396.491725 437.116663 389.244297 422.712594 394.672378 419.983574 399.372357 411.371636"></polygon>
<polygon id="Fill-173" fill="#E34C82" points="405.224589 342.114808 405.224589 345.056267 394.854131 343.085308 394.854131 326.377096 405.224589 328.62132"></polygon>
<polygon id="Fill-175" fill="#962151" points="402.76838 719.575564 488.18689 751.871245 528.971486 755.913763 576.608592 760.64503 611.782629 758.57258 665.818315 755.429778 637.829972 964.575564 376.478639 964.575564 398.765636 734.600827"></polygon>
<polygon id="Fill-177" fill="#EC8EAD" points="394.065657 396.543688 399.372085 411.371727 394.672106 419.982757 388.789188 407.79386 388.789188 352.394571 394.065657 352.394571"></polygon>
<polygon id="Fill-179" fill="#F3BACD" points="390.275533 190.410435 371.475617 223.372022 357.405639 223.372022 371.778841 198.931587 363.560914 198.931587 365.017118 190.410435"></polygon>
<polygon id="Fill-181" fill="#F3BACD" points="405.224589 408.430994 405.497854 410.583525 399.372539 411.371545 394.065203 396.543506 394.065203 352.394389 388.789642 352.394389 388.789642 407.793678 394.671652 419.983483 389.244479 422.712503 381.754653 407.854505 381.754653 342.114717 389.669356 342.114717 394.854131 343.085217 405.224589 345.056176"></polygon>
<polygon id="Fill-183" fill="#E97EA1" points="381.754653 254.664332 381.754653 276.587278 367.078227 325.680588 366.169461 332.320658 342.42626 306.848897 324.445232 267.520504 324.445232 259.364311 335.361312 258.484597 335.361312 258.454637"></polygon>
<polygon id="Fill-185" fill="#962151" points="361.984328 612.575564 293.516429 708.434662 328.751292 749.481192 258.311525 757.539336 271.622534 964.575564 58 964.575564 85.3809864 847.658443 133.108878 713.79468 180.83677 642.41855 295.09247 618.316591"></polygon>
<polygon id="Fill-187" fill="#E97EA1" points="357.405639 223.371659 371.475617 223.371659 372.172851 229.344454 350.673875 231.801117 350.673875 223.371659"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

125
examples/resources/images/svg/p3.svg Normal file
View File

@@ -0,0 +1,125 @@
<svg width="1081px" height="965px" viewBox="0 0 1081 965" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-242">
<path d="M467.7065,854.0002 L460.6795,844.9352 L449.3475,844.9352 L442.7585,852.1902 L442.7585,862.3982 L449.3475,869.1972 C449.3475,869.1972 460.6795,867.1592 461.5745,867.1592 C462.4885,867.1592 467.7065,854.0002 467.7065,854.0002 L467.7065,854.0002 Z M481.7625,729.9972 L478.3535,717.5402 L466.1075,712.3222 L457.9555,716.8552 L453.8795,726.8342 L458.8695,737.7102 L471.0975,739.2912 L481.7625,729.9972 Z M1080.2395,766.2772 L1080.2395,964.4052 L413.9795,964.4052 L423.2735,849.2392 L448.4505,709.1432 L528.6895,662.2152 L637.4955,601.6882 L672.6345,559.5222 L720.7035,490.5632 L719.1215,467.0732 L783.7245,481.9902 L919.7445,532.3252 L1004.0765,634.3322 L1080.2395,766.2772 Z" id="Fill-3" fill="#D94178"></path>
<polygon id="Fill-5" fill="#F1A9C1" points="721.3002 267.593 723.4262 270.703 717.4702 316.383 713.4992 315.873 714.0092 289.52 717.0672 270.492"></polygon>
<polygon id="Fill-7" fill="#F1A9C1" points="721.3002 267.593 717.0672 270.492 704.8382 292.594 713.4992 315.873 717.4702 316.383 712.5332 354.139 701.2012 375.45 685.7932 372.27 693.6992 319.124 700.5862 336.447 706.3662 333.566 707.1052 314.854 696.2812 301.783 701.6582 265.731 717.5232 262.094"></polygon>
<polygon id="Fill-9" fill="#E45D8C" points="719.1215 467.0735 720.7035 490.5635 672.6345 559.5225 695.3155 494.2355 702.3435 472.5555 707.1045 457.8675 701.6585 428.4915 706.1025 425.9795 717.7515 446.6235"></polygon>
<polygon id="Fill-11" fill="#E34C82" points="715.0287 168.1341 717.7517 201.4631 717.5227 262.0941 701.6587 265.7311 704.8387 245.0871 697.6877 230.0121 697.6877 186.3181 697.6877 162.0021 675.2517 111.3501 697.6877 131.3971"></polygon>
<polygon id="Fill-13" fill="#E86E97" points="717.0668 270.492 714.0088 289.52 713.4998 315.873 704.8378 292.594"></polygon>
<polygon id="Fill-15" fill="#E86E97" points="696.2817 301.783 707.1047 314.854 706.3667 333.566 700.5867 336.447 693.6997 319.124"></polygon>
<path d="M701.6586,428.4915 L707.1046,457.8675 L702.3436,472.5555 C702.3436,472.0635 684.8796,461.1365 684.8796,461.1365 L679.4326,472.5555 L665.2896,457.8675 L666.7486,434.8345 L675.2516,406.9165 L701.6586,428.4915 Z" id="Fill-17" fill="#C81862"></path>
<polygon id="Fill-19" fill="#E45D8C" points="699.8481 414.8933 706.1031 425.9793 701.6591 428.4913 675.2511 406.9163 676.9381 401.3303"></polygon>
<polygon id="Fill-21" fill="#E86E97" points="697.6879 230.0125 704.8379 245.0875 701.6589 265.7305 691.9429 250.4985 682.8409 236.2495 686.9879 217.6615 690.0979 219.9285"></polygon>
<path d="M702.3432,472.5559 L695.3162,494.2359 L665.2892,553.1809 L482.6572,674.2329 L521.7142,629.3429 L596.6992,578.1119 L661.7582,532.3259 L675.2512,499.2259 L664.4822,470.6589 L665.2892,457.8679 L679.4332,472.5559 L684.8792,461.1359 C684.8792,461.1359 702.3432,472.0639 702.3432,472.5559" id="Fill-23" fill="#E45D8C"></path>
<path d="M514.7573,334.3738 L482.4473,332.0368 L449.7863,338.5028 L449.0663,346.1278 L448.4503,352.7868 L446.7293,371.1458 L462.7173,401.3998 L487.1913,413.6458 L498.0303,388.8208 L511.4883,390.2088 L544.1503,393.5818 L545.1523,418.0738 L562.9143,420.1118 L590.1993,404.8088 L595.3823,369.7928 L596.1023,365.0148 L596.6993,360.9378 L576.5133,346.9888 L527.2663,335.2698 L514.7573,334.3738 Z M696.2813,301.7828 L693.6993,319.1238 L685.7933,372.2698 L676.9383,401.3298 L675.2513,406.9168 L666.7483,434.8338 L609.6123,491.0558 L571.5233,520.5378 L528.9173,532.3258 L474.0493,519.1658 L445.0253,499.2258 L420.5513,469.3048 L404.2293,432.5678 L400.6803,425.2768 L381.5653,385.8688 L376.5753,332.3708 L382.0043,275.7628 L383.1633,263.6928 L385.0613,243.9098 L386.5363,228.5368 L385.4653,222.2648 L385.4833,222.2648 L403.5973,205.2578 L397.8523,237.1278 L392.4923,266.9078 L387.9073,340.5408 L407.4093,365.0148 L434.4843,365.0148 L434.4843,332.7228 L449.7863,314.0108 L499.9463,306.8778 L523.0143,315.3638 L530.9553,321.2678 L549.7733,317.4198 L566.7623,317.0678 L590.1993,326.2918 L608.2603,333.3898 L618.1163,360.9378 L611.0013,380.8268 L608.2603,388.4868 L627.3053,398.0098 L656.5403,383.7258 L675.2513,354.4728 L682.3673,310.1808 L691.9433,250.4988 L701.6583,265.7308 L696.2813,301.7828 Z" id="Fill-25" fill="#E34C82"></path>
<polygon id="Fill-27" fill="#F2ACC4" points="697.6879 186.3181 697.6879 230.0121 690.0979 219.9281 686.9879 217.6611 677.6239 210.8621 671.7729 208.9291 675.2509 163.7061"></polygon>
<polygon id="Fill-29" fill="#F7C7D8" points="697.6879 162.0022 697.6879 186.3182 675.2509 163.7062 649.5129 100.8092 618.8199 57.4482 633.7529 64.0712 675.2509 111.3502"></polygon>
<polygon id="Fill-31" fill="#D11F69" points="695.3159 494.2356 672.6339 559.5226 637.4959 601.6886 528.6899 662.2146 448.4509 709.1426 482.6579 674.2326 665.2899 553.1806"></polygon>
<path d="M681.3305,261.6199 L670.2625,253.1339 L676.9375,236.9349 L682.8415,236.2499 L691.9425,250.4979 L682.3675,310.1809 L682.3505,310.1809 L641.5895,321.1439 L601.0045,300.6409 L569.9415,275.9209 L576.5135,294.0699 L590.1995,326.2919 L566.7625,317.0679 L573.1215,306.4209 L558.1525,296.1079 L538.4395,300.6409 L527.2665,291.5749 L536.1745,263.6749 L536.6475,243.4879 L537.0695,225.2689 L535.3125,220.0339 L539.6875,217.6619 L549.8785,220.7359 L559.9625,245.3159 L562.9325,253.2219 L566.0945,261.6379 L572.8935,268.7529 L576.0735,272.0739 L598.2805,279.1009 L641.1325,281.8249 L651.4105,279.2059 L667.0825,294.0699 L659.2465,274.0409 L663.5675,269.3499 L676.9375,281.8249 L666.1505,263.0959 L668.2765,257.9479 C668.9975,258.1229 680.6105,261.4269 681.3305,261.6199" id="Fill-33" fill="#F3BACD"></path>
<polygon id="Fill-35" fill="#E99FB6" points="682.3676 310.1809 675.2516 354.4729 656.5406 383.7259 627.3046 398.0099 608.2606 388.4869 611.0016 380.8269 635.2116 376.0659 664.0246 355.7559 682.3496 310.1809"></polygon>
<polygon id="Fill-37" fill="#F2ACC4" points="682.35 310.1809 664.025 355.7559 635.211 376.0659 611.001 380.8269 618.117 360.9379 623.44 358.2149 623.44 329.8759 601.004 300.6409 641.589 321.1439"></polygon>
<path d="M670.2621,253.1336 L681.3301,261.6196 C680.6111,261.4266 668.9971,258.1236 668.2771,257.9476 L670.2621,253.1336 Z" id="Fill-39" fill="#E99FB6"></path>
<polygon id="Fill-41" fill="#E99FB6" points="666.1508 263.0955 676.9378 281.8245 663.5678 269.3505"></polygon>
<polygon id="Fill-43" fill="#F3BACD" points="649.5131 100.8089 675.2511 163.7059 671.7731 208.9299 661.7231 205.6269 640.9041 190.5699 612.6351 182.9449 606.8901 181.3989 588.1971 181.3989 571.9271 194.7689 559.2951 195.4539 533.6791 191.8169 527.2481 189.7789 511.3491 171.8759 481.0771 161.6689 484.4861 116.5509 499.9461 63.5099 540.8651 39.9319 579.3591 39.9319 618.8201 57.4479"></polygon>
<polygon id="Fill-45" fill="#F3BACD" points="402.56 443.4964 400.68 425.2764 404.229 432.5674 420.551 469.3054 445.025 499.2254 474.049 519.1664 528.917 532.3254 571.523 520.5374 609.613 491.0564 666.748 434.8344 665.289 457.8674 634.772 496.2734 605.871 523.2424 654.168 487.4364 664.482 470.6584 675.251 499.2254 661.758 532.3254 603.271 567.2354 512.139 584.0154 436.416 569.0454 412.838 542.7444 410.818 523.2424"></polygon>
<polygon id="Fill-47" fill="#EC9CB7" points="665.8344 215.3953 668.7864 228.5373 664.0244 252.3433 653.6594 244.4723 635.2114 231.4883 622.1924 222.3343 596.6994 218.8033 621.2264 201.9373 637.7244 203.8343"></polygon>
<polygon id="Fill-49" fill="#E99FB6" points="659.2465 274.0413 667.0825 294.0703 651.4105 279.2063 655.4165 278.1873"></polygon>
<polygon id="Fill-51" fill="#EC92B0" points="665.2895 457.8674 664.4815 470.6584 654.1685 487.4364 605.8705 523.2424 634.7715 496.2734"></polygon>
<polygon id="Fill-53" fill="#EC8EAD" points="664.0248 252.343 661.1968 258.369 639.8848 245.825 635.2118 231.489 653.6598 244.472"></polygon>
<polygon id="Fill-55" fill="#E86E97" points="661.7231 205.6267 638.4091 197.9487 598.1581 194.1017 612.6351 182.9447 640.9041 190.5697"></polygon>
<polygon id="Fill-57" fill="#EC9CB7" points="595.5756 240.7122 596.1896 240.9052 617.9406 242.9432 639.8856 245.8252 661.1966 258.3692 656.3646 268.6122 617.9406 262.0942 583.3646 248.4952 578.4106 235.4592"></polygon>
<polygon id="Fill-59" fill="#F2ACC4" points="656.3647 268.6121 654.9597 271.6161 636.5987 276.8351 597.5957 273.4261 576.2847 265.5031 567.6757 251.4471 564.4607 234.8971 580.3787 254.1531 610.5267 264.8171"></polygon>
<polygon id="Fill-61" fill="#F7C7D8" points="639.8852 245.825 617.9412 242.944 620.8402 239.799 620.8052 235.248"></polygon>
<polygon id="Fill-63" fill="#E99FB6" points="623.4399 329.8762 623.4399 358.2152 618.1169 360.9382 608.2599 333.3902 576.5129 294.0702 569.9419 275.9212 601.0039 300.6412"></polygon>
<polygon id="Fill-65" fill="#EC8EAD" points="621.226 201.9373 596.7 218.8033 578.411 222.3343 564.46 234.8963 562.914 226.9563 563.828 208.8243 571.98 201.1113 594.205 198.8453"></polygon>
<polygon id="Fill-67" fill="#FDF8F8" points="615.4809 237.7078 614.1279 240.0448 610.2979 240.9058 608.4189 237.8488 611.6509 236.2318"></polygon>
<path d="M598.0522,229.5911 L614.0402,231.4881 L620.8052,235.2481 L620.8402,239.7991 L617.9412,242.9441 L596.1902,240.9051 L595.5752,240.7121 L594.8202,234.2641 L598.0522,229.5911 Z M615.4812,237.7081 L611.6512,236.2321 L608.4182,237.8481 L610.2982,240.9051 L614.1282,240.0451 L615.4812,237.7081 Z" id="Fill-69" fill="#D04074"></path>
<polygon id="Fill-71" fill="#EC9CB7" points="612.6352 182.9446 598.1572 194.1016 594.6972 193.7676 593.2912 193.6266 571.9272 194.7686 588.1972 181.3986 606.8902 181.3986"></polygon>
<polygon id="Fill-73" fill="#EC8EAD" points="576.5131 294.0701 608.2601 333.3901 590.2001 326.2921"></polygon>
<polygon id="Fill-75" fill="#F7C7D8" points="603.2709 567.2356 661.7579 532.3256 596.6999 578.1116 521.7139 629.3426 482.6579 674.2326 391.2809 576.3196 400.6799 537.7726 410.8179 523.2426 412.8379 542.7446 436.4169 569.0456 512.1389 584.0146"></polygon>
<polygon id="Fill-77" fill="#E86E97" points="596.6996 218.8035 622.1926 222.3345 603.6576 223.0555 587.0016 226.9555 564.4606 234.8965 578.4106 222.3345"></polygon>
<polygon id="Fill-79" fill="#EC8EAD" points="587.0014 226.9558 603.6574 223.0558 622.1924 222.3348 635.2114 231.4888 639.8854 245.8248 620.8054 235.2478 614.0404 231.4888 598.0524 229.5908 578.4104 235.4588 583.3644 248.4958 617.9404 262.0938 656.3644 268.6118 610.5264 264.8168 580.3784 254.1528 564.4604 234.8968"></polygon>
<polygon id="Fill-81" fill="#F7C7D8" points="598.0522 229.5911 594.8202 234.2641 595.5752 240.7121 578.4102 235.4591"></polygon>
<polygon id="Fill-83" fill="#D04074" points="641.1323 281.8245 598.2803 279.1005 576.0733 272.0735 572.8943 268.7525 576.2843 265.5025 597.5963 273.4265 636.5993 276.8345 654.9593 271.6165 656.3643 268.6125 661.1963 258.3695 664.0253 252.3435 668.7863 228.5365 665.8343 215.3955 637.7243 203.8345 621.2263 201.9375 594.2043 198.8455 594.6963 193.7675 598.1573 194.1015 638.4083 197.9495 661.7233 205.6265 671.7733 208.9295 677.6233 210.8625 686.9873 217.6615 682.8413 236.2495 676.9383 236.9345 670.2623 253.1335 668.2773 257.9475 666.1513 263.0955 663.5683 269.3505 659.2463 274.0415 655.4163 278.1875 651.4103 279.2065"></polygon>
<polygon id="Fill-85" fill="#EC8EAD" points="596.6996 360.9383 596.1016 365.0143 596.0846 365.0143 580.8866 358.0393 573.3146 356.7393 562.0176 354.8073 557.5726 354.0513 550.1236 352.7863 545.1516 351.9253 544.1676 351.8553 536.4896 351.3453 528.4436 350.8183 519.3426 350.2213 516.9536 350.0633 514.7576 334.3743 527.2656 335.2703 576.5126 346.9883"></polygon>
<polygon id="Fill-87" fill="#D04074" points="596.0844 365.0144 596.1024 365.0144 595.3824 369.7934 575.6164 373.6934 580.8874 358.0394"></polygon>
<polygon id="Fill-89" fill="#F2ACC4" points="595.3823 369.7932 590.1993 404.8092 562.9143 420.1112 545.1523 418.0732 544.1503 393.5822 511.4883 390.2092 512.0163 385.0782 553.6733 387.4682 571.5233 380.8272"></polygon>
<polygon id="Fill-91" fill="#D04074" points="527.2485 189.7791 533.6795 191.8171 559.2955 195.4541 571.9275 194.7691 593.2915 193.6271 594.6965 193.7671 594.2045 198.8451 571.9795 201.1121 563.8275 208.8241 562.9145 226.9561 564.4605 234.8971 567.6755 251.4471 562.9325 253.2211 559.9625 245.3161 554.3055 211.7761 536.1745 209.2811 528.3385 223.8281 513.9485 250.5331 507.9045 255.6461 505.1115 252.3431 518.9385 228.5371 525.0525 208.8241 525.0525 197.9491 503.3025 187.5131 504.8305 182.6641"></polygon>
<polygon id="Fill-93" fill="#D04074" points="567.6752 251.447 576.2842 265.503 572.8942 268.753 566.0942 261.637 562.9322 253.221"></polygon>
<polygon id="Fill-95" fill="#E45D8C" points="573.3149 356.7395 580.8869 358.0395 575.6169 373.6935 568.5369 374.7825 571.5229 367.0525 575.1069 360.9385 573.3149 356.7575"></polygon>
<polygon id="Fill-97" fill="#EC8EAD" points="573.1215 306.4212 566.7625 317.0682 549.7725 317.4202 530.9555 321.2672 523.0145 315.3642 499.9455 306.8782 486.7515 299.9562 485.2235 293.7362 488.5435 292.9282 502.4935 298.0232 506.1305 303.4692 521.5385 308.9162 532.0805 310.1812 546.2585 307.3172 565.0755 309.3552 560.9815 304.3832"></polygon>
<polygon id="Fill-99" fill="#EC8EAD" points="571.5229 380.8269 553.6729 387.4679 512.0159 385.0779 517.4619 375.5559 531.7819 374.7299"></polygon>
<polygon id="Fill-101" fill="#EC92B0" points="566.7621 368.9148 564.3901 375.3098 564.4081 375.4328 563.5811 375.5558 562.0181 374.6068"></polygon>
<polygon id="Fill-103" fill="#E45D8C" points="562.018 354.8069 573.315 356.7399 573.315 356.7569 575.107 360.9379 571.523 367.0529 570.856 363.1519 567.798 364.2589 567.798 360.4289 565.584 358.8119 562.018 360.4289 562.018 354.8249"></polygon>
<polygon id="Fill-105" fill="#E34C82" points="560.9819 304.3831 565.0759 309.3551 546.2579 307.3171 555.2019 303.4691"></polygon>
<polygon id="Fill-107" fill="#EC8EAD" points="558.1528 296.1082 573.1218 306.4212 560.9818 304.3832 555.2018 303.4692 546.2578 307.3172 532.0808 310.1812 521.5388 308.9162 509.6438 298.0232 502.4938 298.0232 488.5438 292.9282 494.0078 278.1872 512.0158 291.7862 527.2658 291.5752 538.4398 300.6412"></polygon>
<path d="M564.3901,375.3098 L566.7621,368.9148 L562.0181,374.6068 L557.4681,371.8138 L548.0681,369.7928 L540.3201,367.6148 C540.3021,367.2278 539.4591,359.4448 539.4591,359.4448 L539.7411,355.7558 L544.1671,351.8548 L545.1521,351.9258 L550.1231,352.7868 L551.3891,358.0388 L557.5731,354.0508 L562.0181,354.8068 L562.0181,354.8248 L562.0181,360.4288 L565.5841,358.8118 L567.7981,360.4288 L567.7981,364.2588 L570.8561,363.1518 L571.5231,367.0528 L568.5361,374.7828 L564.4081,375.4328 L564.3901,375.3098 Z" id="Fill-109" fill="#F3BACD"></path>
<polygon id="Fill-111" fill="#F2B0C7" points="560.3139 376.0657 563.5819 375.5557 564.4079 375.4327 568.5369 374.7827 575.6169 373.6937 595.3819 369.7937 571.5229 380.8267 531.7819 374.7307 542.8149 374.0807 542.8329 374.0807"></polygon>
<polygon id="Fill-113" fill="#E45D8C" points="557.5727 354.0511 551.3887 358.0391 550.1237 352.7861"></polygon>
<polygon id="Fill-115" fill="#E45D8C" points="544.1674 351.8553 539.7404 355.7553 536.4894 351.3453"></polygon>
<polygon id="Fill-117" fill="#F2ACC4" points="540.8647 39.9314 499.9457 63.5094 484.4857 116.5504 481.0767 161.6684 444.6907 165.0774 429.2297 175.6004 413.0667 176.6374 418.8467 115.4264 449.7867 78.6894 474.6117 59.3104 518.4817 39.9314"></polygon>
<path d="M540.3198,367.6145 L538.3178,367.0525 L539.4598,359.4455 C539.4598,359.4455 540.3018,367.2285 540.3198,367.6145" id="Fill-119" fill="#EC92B0"></path>
<polygon id="Fill-121" fill="#F3BACD" points="536.4897 351.3455 539.7407 355.7555 539.4597 359.4455 538.3177 367.0525 538.3177 371.0235 523.4187 369.8815 523.4187 355.7555 528.4437 350.8185"></polygon>
<path d="M530.2709,257.7898 L536.6479,243.4878 L536.1739,263.6748 L527.2659,291.5748 L512.0159,291.7858 L494.0079,278.1868 C494.0079,278.1868 510.3299,270.9318 511.3489,270.2288 L512.0159,264.8168 L530.2709,257.7898 Z" id="Fill-123" fill="#E99FB6"></path>
<polygon id="Fill-125" fill="#EC8EAD" points="528.3383 223.8284 536.1743 209.2814 554.3053 211.7754 559.9623 245.3154 549.8783 220.7364 539.6883 217.6614 535.3133 220.0334"></polygon>
<polygon id="Fill-127" fill="#E45D8C" points="528.4438 350.8186 523.4188 355.7556 521.7668 353.5246 519.3418 350.2206"></polygon>
<polygon id="Fill-129" fill="#EC9CB7" points="511.3491 171.8762 527.2481 189.7792 504.8301 182.6642 491.5131 178.4472 488.5431 178.1662"></polygon>
<polygon id="Fill-131" fill="#EC8EAD" points="525.0522 197.949 525.0522 208.824 518.9392 228.537 494.0082 243.488 465.9492 240.906 440.7902 239.711 427.4912 243.488 421.0082 234.897 443.8482 228.537 474.6992 233.755 496.7132 231.559 506.2362 225.269 506.2362 214.13 506.2362 205.627 480.2512 183.964 503.3022 187.513"></polygon>
<polygon id="Fill-133" fill="#EC92B0" points="523.4184 355.7556 523.4184 369.8806 522.3294 369.7936 521.2044 369.8456 521.7144 353.5596 521.7674 353.5246"></polygon>
<polygon id="Fill-135" fill="#E34C82" points="521.5385 308.9158 506.1305 303.4698 502.4935 298.0228 509.6435 298.0228"></polygon>
<polygon id="Fill-137" fill="#D04074" points="523.4184 369.8811 538.3174 371.0231 538.3174 367.0521 540.3194 367.6141 548.0674 369.7931 557.4684 371.8141 562.0184 374.6071 563.5814 375.5561 560.3144 376.0661 542.8324 374.0801 542.8144 374.0801 519.8524 371.4801 513.4914 370.2501 521.2044 369.8461 522.3294 369.7931"></polygon>
<polygon id="Fill-139" fill="#F3BACD" points="519.3422 350.221 521.7672 353.524 521.7142 353.559 521.2042 369.846 513.4912 370.25 506.4992 368.915 506.4992 368.897 506.4992 364.083 507.5192 354.825 512.0162 348.658 516.9532 350.063"></polygon>
<polygon id="Fill-141" fill="#EC8EAD" points="518.9389 228.5369 505.1119 252.3429 489.9149 256.6479 463.6299 254.6099 429.3879 246.0009 427.4909 243.4879 440.7909 239.7109 465.9499 240.9059 494.0079 243.4879"></polygon>
<polygon id="Fill-143" fill="#E86E97" points="531.7817 374.7303 517.4627 375.5563 512.0157 385.0783 476.1397 377.5943 448.4507 352.7863 449.0657 346.1273 449.0837 346.1273 468.1637 357.0203 480.2337 365.8753 482.4297 366.0333 487.8057 366.4023 496.8887 367.0523 506.4997 368.8973 506.4997 368.9153 513.4917 370.2503 519.8517 371.4803 542.8147 374.0803"></polygon>
<polygon id="Fill-145" fill="#E86E97" points="514.7573 334.3738 516.9533 350.0628 512.0163 348.6578 487.0323 341.5598 481.4813 342.1038 468.1633 343.4218 449.0833 346.1278 449.0663 346.1278 449.7863 338.5028 482.4473 332.0368"></polygon>
<path d="M512.0161,264.8172 L511.3491,270.2292 C510.3301,270.9312 494.0081,278.1872 494.0081,278.1872 L488.5431,292.9282 L485.2231,293.7362 L484.0291,288.8522 L486.0841,281.8242 L488.5431,273.4262 L512.0161,264.8172 Z" id="Fill-147" fill="#EC8EAD"></path>
<polygon id="Fill-149" fill="#EC8EAD" points="512.0161 385.0784 511.4891 390.2084 498.0311 388.8204 487.1911 413.6454 462.7171 401.4004 446.7291 371.1464 448.4511 352.7864 476.1401 377.5944"></polygon>
<polygon id="Fill-151" fill="#E86E97" points="511.3491 171.8762 488.5431 178.1662 448.4331 174.3712 429.2301 175.6012 444.6911 165.0772 481.0771 161.6682"></polygon>
<polygon id="Fill-153" fill="#D04074" points="505.1118 252.343 507.9048 255.646 500.8068 261.637 489.9148 261.637 489.9148 256.648"></polygon>
<polygon id="Fill-155" fill="#EC92B0" points="507.519 354.8245 506.499 364.0835 503.881 363.9605 505.604 351.3635"></polygon>
<polygon id="Fill-157" fill="#E86E97" points="506.2358 214.1302 506.2358 225.2692 487.3138 214.1302 481.0768 210.4582 491.4428 203.3782"></polygon>
<polygon id="Fill-159" fill="#EC9CB7" points="506.2358 205.6267 506.2358 214.1297 491.4428 203.3777 471.4488 201.6207 441.6338 213.3567 419.2858 222.3347 418.3728 215.6937 445.7108 201.1117 440.2818 181.3987 463.6308 181.3987 480.2518 183.9637"></polygon>
<polygon id="Fill-161" fill="#F7C7D8" points="506.2358 225.2688 486.0848 223.9158 488.5438 220.0338 487.3138 214.1298"></polygon>
<polygon id="Fill-163" fill="#F3BACD" points="505.604 351.3455 505.604 351.3635 503.881 363.9605 497.996 363.6615 487.806 366.4025 486.945 349.3775 490.353 346.1455 496.291 351.1695 498.171 348.0955 504.11 348.6575"></polygon>
<polygon id="Fill-165" fill="#D04074" points="503.8813 363.9602 506.4993 364.0832 506.4993 368.8972 496.8893 367.0522 487.8063 366.4022 497.9953 363.6612"></polygon>
<polygon id="Fill-167" fill="#EC8EAD" points="500.8071 261.6375 487.8761 268.6125 456.9371 266.2405 425.9271 274.5505 424.6271 274.9025 407.4101 284.9335 421.2361 267.0835 442.4421 255.5055 471.3261 261.6375 489.9141 261.6375"></polygon>
<polygon id="Fill-169" fill="#E86E97" points="499.9458 306.8782 449.7868 314.0112 484.0288 288.8522 485.2228 293.7362 486.7518 299.9562"></polygon>
<polygon id="Fill-171" fill="#D04074" points="489.9145 256.6477 489.9145 261.6377 471.3255 261.6377 442.4415 255.5057 430.7585 253.0287 426.5775 250.2697 429.3885 246.0007 463.6305 254.6097"></polygon>
<polygon id="Fill-173" fill="#F2ACC4" points="512.0161 264.8172 488.5431 273.4262 487.8761 268.6122 500.8071 261.6372 507.9051 255.6462 513.9491 250.5332 528.3381 223.8282 535.3131 220.0332 537.0701 225.2692 536.6481 243.4882 530.2711 257.7902"></polygon>
<polygon id="Fill-175" fill="#F3BACD" points="487.8764 268.6121 488.5434 273.4261 462.2604 285.8471 438.2264 298.0231 425.9274 274.5501 456.9374 266.2401"></polygon>
<polygon id="Fill-177" fill="#F3BACD" points="486.9448 349.3777 487.8058 366.4027 482.4298 366.0337 481.4988 352.3297 484.3448 345.9517"></polygon>
<polygon id="Fill-179" fill="#E45D8C" points="490.353 346.1453 486.945 349.3773 484.345 345.9523 481.499 342.2093 481.481 342.1043 487.033 341.5593 512.016 348.6573 507.519 354.8243 505.604 351.3633 505.604 351.3453 504.11 348.6573 498.171 348.0953 496.291 351.1693"></polygon>
<polygon id="Fill-181" fill="#E45D8C" points="484.3452 345.9519 481.4982 352.3289 482.4302 366.0339 480.2342 365.8749 468.1632 357.0199 468.1632 343.4219 481.4812 342.1039 481.4982 342.2099"></polygon>
<polygon id="Fill-183" fill="#EC8EAD" points="442.5473 305.4021 486.0843 281.8241 484.0283 288.8521 449.7863 314.0111 434.4843 332.7221"></polygon>
<polygon id="Fill-185" fill="#FDF8F8" points="483.8003 217.8723 483.3433 221.4033 479.0913 221.4033 476.7203 219.6463 479.4433 216.6423"></polygon>
<path d="M487.3139,214.1302 L488.5429,220.0332 L486.0849,223.9162 L478.1609,223.3892 L463.0509,220.9122 L463.0509,215.9042 L465.9499,210.4582 L481.0769,210.4582 L487.3139,214.1302 Z M483.3429,221.4032 L483.7999,217.8722 L479.4429,216.6422 L476.7199,219.6472 L479.0909,221.4032 L483.3429,221.4032 Z" id="Fill-187" fill="#D04074"></path>
<polygon id="Fill-189" fill="#F3BACD" points="478.354 717.5403 481.762 729.9973 471.097 739.2913 458.87 737.7103 453.879 726.8343 457.956 716.8553 466.108 712.3223"></polygon>
<polygon id="Fill-191" fill="#D04074" points="468.1635 343.4217 468.1635 357.0207 449.0835 346.1277"></polygon>
<path d="M460.6792,844.9348 L467.7062,853.9998 C467.7062,853.9998 462.4892,867.1598 461.5752,867.1598 C460.6792,867.1598 449.3472,869.1978 449.3472,869.1978 L442.7582,862.3988 L442.7582,852.1908 L449.3472,844.9348 L460.6792,844.9348 Z" id="Fill-193" fill="#F3BACD"></path>
<polygon id="Fill-195" fill="#F7C7D8" points="465.9497 210.4583 463.0517 215.9043 463.0517 220.9123 443.1627 217.6613 464.0697 210.4583"></polygon>
<polygon id="Fill-197" fill="#E34C82" points="449.7866 78.6892 418.8476 115.4262 413.0666 176.6372 407.4096 177.7622 382.4616 204.5202 400.8206 129.0252 418.1616 97.0662"></polygon>
<path d="M371.1284,575.3879 L448.4504,709.1429 L423.2744,849.2399 L413.9804,964.4059 L400.6804,964.4059 C398.1144,960.7859 410.3434,849.9239 410.3434,849.9239 L437.5584,709.1429 L372.9394,601.6889 L345.2844,517.9719 L352.1894,515.2309 L371.1284,575.3879 Z" id="Fill-199" fill="#D11F69"></path>
<polygon id="Fill-201" fill="#E86E97" points="440.2817 181.3987 445.7107 201.1117 418.3727 215.6937 417.8277 211.7757 419.1977 197.9487 421.2357 189.3227 431.8837 181.3987"></polygon>
<polygon id="Fill-203" fill="#EC8EAD" points="419.2856 222.3347 441.6346 213.3567 471.4486 201.6207 491.4426 203.3777 481.0766 210.4587 465.9496 210.4587 464.0696 210.4587 443.1626 217.6617 420.3406 230.0127"></polygon>
<path d="M372.9389,601.6887 L437.5579,709.1427 L410.3429,849.9237 C410.3429,849.9237 398.1149,960.7867 400.6799,964.4057 L0.2429,964.4057 L70.0809,744.0517 L158.9459,625.2667 L226.0429,565.4257 L345.2849,517.9717 L372.9389,601.6887 Z" id="Fill-205" fill="#D94178"></path>
<polygon id="Fill-207" fill="#D04074" points="427.4907 243.4881 429.3877 246.0011 426.5777 250.2701 422.8527 247.8101 420.0947 246.0011 419.4787 244.3321 418.2147 240.9051 416.5977 236.5131 421.0087 234.8971"></polygon>
<polygon id="Fill-209" fill="#EC8EAD" points="422.853 247.8103 409.237 256.6473 419.479 244.3313 420.094 246.0003"></polygon>
<polygon id="Fill-211" fill="#EC9CB7" points="443.8481 228.5369 421.0081 234.8969 420.3401 230.0129 443.1621 217.6619 463.0511 220.9119 478.1611 223.3889 486.0841 223.9159 506.2361 225.2689 496.7131 231.5589 474.7001 233.7549"></polygon>
<polygon id="Fill-213" fill="#D04074" points="429.2299 175.6009 448.4329 174.3709 488.5429 178.1659 491.5129 178.4469 504.8309 182.6639 503.3019 187.5129 480.2509 183.9639 463.6299 181.3989 440.2819 181.3989 431.8829 181.3989 421.2359 189.3229 419.1979 197.9489 417.8279 211.7759 418.3729 215.6939 419.2859 222.3349 420.3399 230.0129 421.0079 234.8969 416.5979 236.5139 416.4399 236.0919 414.9289 231.9799 414.2089 230.0129 413.8749 225.2689 412.3809 204.2909 409.2189 199.9869 405.5999 203.3779 407.4099 177.7619 413.0669 176.6379"></polygon>
<polygon id="Fill-215" fill="#E99FB6" points="416.4399 236.0916 403.7199 246.6856 418.2139 240.9056 419.4789 244.3316 409.2369 256.6476 422.8529 247.8106 426.5779 250.2696 430.7579 253.0286 442.4419 255.5056 421.2359 267.0836 407.4099 284.9336 424.6279 274.9026 425.9269 274.5506 438.2259 298.0236 462.2599 285.8476 488.5439 273.4256 486.0849 281.8246 442.5469 305.4026 434.4839 332.7226 434.4839 365.0146 407.4099 365.0146 387.9079 340.5406 392.4929 266.9076 397.8519 237.1286 401.8389 237.8486 414.9289 231.9806"></polygon>
<polygon id="Fill-217" fill="#EC8EAD" points="416.5981 236.5135 418.2141 240.9055 403.7201 246.6855 416.4401 236.0915"></polygon>
<polygon id="Fill-219" fill="#EC8EAD" points="414.2085 230.0125 414.9295 231.9805 401.8395 237.8485 413.8745 225.2685"></polygon>
<polygon id="Fill-221" fill="#C81862" points="402.56 443.4964 410.818 523.2424 400.68 537.7724 391.281 576.3194 373.922 557.7134 345.285 493.3224"></polygon>
<polygon id="Fill-223" fill="#E86E97" points="407.4096 177.762 405.5996 203.378 403.5966 205.258 385.4826 222.265 385.4656 222.265 382.4616 204.52"></polygon>
<polygon id="Fill-225" fill="#EC8EAD" points="403.5971 205.2576 405.6001 203.3776 409.2191 199.9866 412.3811 204.2916 413.8741 225.2686 401.8391 237.8486 397.8521 237.1286"></polygon>
<polygon id="Fill-227" fill="#F1A9C1" points="386.5366 228.5369 385.0606 243.9099 380.5996 243.4879 371.7436 221.8609 376.5756 218.8039"></polygon>
<polygon id="Fill-229" fill="#F1A9C1" points="385.061 243.9099 383.164 263.6929 372.851 277.2909 366.139 290.5559 363.346 290.1349 365.121 278.6439 380.599 243.4879"></polygon>
<polygon id="Fill-231" fill="#E86E97" points="383.1635 263.6927 382.0045 275.7627 374.1505 294.4567 365.1205 303.4697 366.1395 290.5557 372.8505 277.2917"></polygon>
<polygon id="Fill-233" fill="#F1A9C1" points="382.0044 275.763 376.5754 332.371 368.5284 334.409 358.3204 322.848 363.3464 290.135 366.1394 290.556 365.1204 303.47 374.1504 294.456"></polygon>
<polygon id="Fill-235" fill="#E86E97" points="371.7436 221.8606 380.5986 243.4876 365.1206 278.6446 367.4386 224.5836"></polygon>
<polygon id="Fill-237" fill="#E45D8C" points="345.2846 493.3225 373.9226 557.7135 391.2806 576.3195 482.6576 674.2325 448.4506 709.1425 371.1286 575.3875 352.1886 515.2305"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

116
examples/resources/images/svg/p4.svg Normal file
View File

@@ -0,0 +1,116 @@
<svg width="1081px" height="965px" viewBox="0 0 1081 965" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-209">
<polygon id="Path-2" fill="#D94178" points="330.10259 669.888215 351.814022 600.056401 747.34616 638.866078 868.668194 550.856591 889.660024 567.970583 733.819095 964.854616 576.863134 964.854616"></polygon>
<polygon id="Fill-2" fill="#C81862" points="1028.12492 787.909605 1046.76119 899.11959 1041.15528 964.831127 1041.15528 964.854616 1020.11149 964.854616 1020.11149 964.831127 1025.734 898.188315 983.647291 692.854616"></polygon>
<polygon id="Fill-3" fill="#D94178" points="866.999092 550.847559 876.64318 562.190143 704.909202 857.451598 722.536141 896.648854 725.348272 937.733324 712.519782 937.733324 697.68837 902.332553 695.684574 861.248083 704.909202 857.451598 656.501752 799.387717 691.181494 896.011971 691.181494 964.854616 1020.11166 964.75674 1020.11166 964.731926 1025.7333 898.24244 983.647466 693.382533 1028.1251 788.21745 1046.76136 899.172951 1041.15545 964.731926 1041.15545 964.75674 1080.63277 964.731926 1080.83464 900.76378 1001.27353 673.147023 947.569523 614.985265 854.295566 535.854616"></polygon>
<polygon id="Fill-4" fill="#C81862" points="876.643268 552.549305 704.909289 739.720291 752.308287 682.8948 752.308287 682.87907 866.999179 545.358185"></polygon>
<polygon id="Fill-5" fill="#D94178" points="854.295392 535.854354 866.998917 545.358622 752.308024 682.878634 742.384296 600.056226 742.384296 545.342892 754.202586 496.453937 724.059131 453.062532 765.41528 475.006415 765.41528 491.841623 806.897268 500.460655"></polygon>
<polygon id="Fill-6" fill="#C81862" points="724.058956 453.062357 754.202411 496.453762 742.384121 545.343591 733.811404 513.27324 726.652618 491.531222"></polygon>
<polygon id="Fill-7" fill="#F1A9C1" points="752.308024 282.633598 752.308024 351.494974 742.384296 384.822831 742.384296 275.411893 745.661329 265.581669"></polygon>
<polygon id="Fill-8" fill="#E03F7B" points="742.383947 545.343241 742.383947 600.055702 736.762307 620.975403 700.794472 641.227464 651.501787 648.13807 609.771619 645.311083 570.852707 600.646441 612.738425 609.467339 673.60122 609.467339 733.81123 568.59182 733.81123 513.273765"></polygon>
<polygon id="Fill-9" fill="#EC8EAD" points="742.383947 275.412155 742.383947 384.822219 731.155523 317.949784 725.595928 284.776603 725.254243 282.788536 725.254243 239.350816"></polygon>
<polygon id="Fill-10" fill="#F3BACD" points="731.155785 317.949609 742.384209 384.822044 676.47391 488.719703 653.007736 500.461092 619.741924 494.404262 579.611822 464.492384 615.532467 464.492384 659.825711 464.492384 678.461977 434.425829 687.375505 425.403067 699.396534 405.27597 684.067887 367.941395 655.213398 345.749331 639.18565 313.41507 639.18565 286.532044 655.213398 293.598199 689.783031 293.598199"></polygon>
<polygon id="Fill-11" fill="#C81862" points="736.762569 620.975228 742.384209 600.056401 752.307937 682.878808 752.307937 682.894538 704.909813 739.720029 733.128121 634.564863"></polygon>
<polygon id="Fill-12" fill="#BE1F5F" points="736.762569 620.975228 733.128121 634.564863 707.099745 649.349086 662.015643 656.756927 619.741924 656.756927 609.771881 645.311782 651.502049 648.137895 700.794734 641.227289"></polygon>
<path d="M733.811579,513.273503 L733.811579,568.592432 L673.601569,609.467077 L612.737901,609.467077 L570.852183,600.646179 L471.863082,484.417266 L471.863082,444.940822 L471.863082,432.919793 L495.950581,488.719354 L538.115065,534.115429 L606.137521,559.36693 L670.650492,559.36693 C670.650492,559.36693 725.596277,488.347957 726.652793,491.530611 L733.811579,513.273503 Z" id="Fill-13" fill="#F2ACC4"></path>
<polygon id="Fill-15" fill="#D11F69" points="733.128034 634.564688 704.909726 739.719854 619.741837 656.757626 662.015556 656.757626 707.099657 649.348911"></polygon>
<polygon id="Fill-17" fill="#F3BACD" transform="translate(710.515898, 879.854616) rotate(23.000000) translate(-710.515898, -879.854616) " points="722.53649 879.31435 725.347747 902.854616 712.519257 902.854616 697.687845 882.570952 695.684049 859.029896 704.909551 856.854616"></polygon>
<polygon id="Fill-19" fill="#F1A9C1" points="721.744584 285.4293 707.658588 278.176135 715.03497 271.80908 715.03497 254.679375 715.03497 244.150052 707.642858 236.19866 707.642858 163.299107 690.389064 123.014328 725.254942 173.518205 725.254942 239.350728 725.254942 282.789323 725.595753 284.776515"></polygon>
<path d="M724.058956,453.062357 L726.652618,491.531222 C725.596103,488.347695 670.650318,559.366668 670.650318,559.366668 L606.137346,559.366668 L595.545977,539.736807 L655.21331,539.736807 L696.088828,510.073983 L723.74873,448.559277 L724.058956,453.062357 Z" id="Fill-21" fill="#EC92B0"></path>
<polygon id="Fill-23" fill="#E45D8C" points="723.748381 448.559015 696.089353 510.074595 655.212961 539.736545 595.545627 539.736545 606.13787 559.36728 538.115415 534.114905 495.950931 488.719703 471.863431 432.920142 518.142994 493.643117 582.469831 521.302145 655.81943 521.302145"></polygon>
<polygon id="Fill-25" fill="#E97EA1" points="721.744584 285.4293 703.94724 281.375393 707.642858 278.176135 707.658588 278.176135"></polygon>
<polygon id="Fill-27" fill="#E86E97" points="715.035232 254.679375 715.035232 271.80908 697.299932 247.519715 679.564632 239.040503 662.123829 239.040503 633.424015 247.45767 622.956737 247.45767 641.080911 227.625943 659.716302 223.12199 683.617666 223.12199 707.643121 240.251694"></polygon>
<polygon id="Fill-29" fill="#F0ABC2" points="697.299932 247.51989 715.035232 271.809254 676.054275 257.381573 659.623671 257.381573 658.086525 257.785303 628.097745 265.581145 633.424015 247.457845 662.123829 239.039804 679.564632 239.039804"></polygon>
<polygon id="Fill-31" fill="#F1A9C1" points="703.947065 281.375742 721.74441 285.42965 725.595578 284.776865 731.156047 317.950046 689.783294 293.597763 695.032663 289.063223 700.142212 284.668504 709.31965 287.137202 701.601583 283.410124"></polygon>
<polygon id="Fill-33" fill="#E97EA1" points="709.32 287.137377 700.141687 284.667805 701.601933 283.410299"></polygon>
<polygon id="Fill-35" fill="#F7C7D8" points="707.643121 163.299281 707.643121 236.197961 695.498875 223.122165 683.617666 223.122165 659.716302 223.122165 641.080911 227.625244 612.737639 234.132994 622.956737 247.457845 620.953815 260.083595 620.953815 319.906478 630.861813 327.376364 630.861813 345.748719 613.282063 350.858268 597.502496 346.354315 588.976969 327.70232 597.502496 319.595379 597.502496 310.277246 597.502496 260.083595 597.797866 219.907177 554.825047 231.833828 521.156379 231.833828 497.239285 240.74823 497.239285 171.421079 505.921236 150.580026 591.491982 132.937357 595.048654 131.182616 601.121214 128.169493 608.529055 124.50446 616.309167 120.653292 654.017761 101.985567 690.389326 123.013629"></polygon>
<polygon id="Fill-37" fill="#F1A9C1" points="707.643121 236.198311 715.035232 244.149702 715.035232 254.679026 707.643121 240.251344 683.617666 223.12164 695.498875 223.12164"></polygon>
<polygon id="Fill-39" fill="#D94178" points="704.909639 739.719854 656.501315 702.913099 656.501315 702.897369 600.049843 659.97174 416.746629 556.758325 390.297918 521.302582 444.001926 488.719266 444.001926 467.195717 471.862819 444.940734 471.862819 484.418052 570.852794 600.646092 609.771706 645.311607 619.741749 656.756752"></polygon>
<polygon id="Fill-41" fill="#F1A9C1" points="703.947065 281.375742 701.601583 283.410124 691.585225 278.564485"></polygon>
<polygon id="Fill-43" fill="#E97EA1" points="701.601933 283.410211 700.141687 284.667718 684.829644 280.536909 691.5847 278.564573"></polygon>
<polygon id="Fill-45" fill="#F2ACC4" points="684.068062 367.941395 699.396709 405.27597 687.37568 425.403067 687.37568 409.406779 674.145207 378.672584 655.212698 356.355556 655.212698 345.748457"></polygon>
<polygon id="Fill-47" fill="#F1A9C1" points="694.287509 288.193455 695.032925 289.062961 689.783556 293.598374 655.213048 293.598374 639.185301 286.532218 639.185301 280.381884 676.100416 283.083906"></polygon>
<polygon id="Fill-49" fill="#E97EA1" points="694.287509 288.193455 676.100416 283.083906 681.909939 281.39121"></polygon>
<polygon id="Fill-51" fill="#FDF8F8" points="692.283713 270.209451 675.448505 275.940325 679.067223 271.607651 679.067223 264.028531"></polygon>
<polygon id="Fill-53" fill="#C81862" points="691.181145 764.164506 691.181145 807.804092 682.453752 807.804092 682.453752 770.982481 643.176551 710.460498 598.295189 675.999225 468.446054 630.713258 349.003901 606.268343 365.418775 564.833545 365.418775 564.818689 379.784412 556.540468 368.648619 593.844458 466.721898 614.670655 600.04993 659.972351 656.501402 702.897981 656.501402 702.912837"></polygon>
<polygon id="Fill-55" fill="#F2ACC4" points="687.375854 409.406954 687.375854 425.403242 678.462326 434.426004 678.462326 412.776617 667.046893 413.709042 667.839498 412.776617 649.497729 409.406954 626.963106 409.406954 630.861463 396.051517 619.7414 363.934851 644.699279 363.934851 655.212873 356.355731 674.144508 378.672759"></polygon>
<polygon id="Fill-57" fill="#F1A9C1" points="684.829294 280.537259 700.141338 284.668068 695.032663 289.062787 694.287247 288.193281 681.909677 281.391035"></polygon>
<polygon id="Fill-59" fill="#D94178" points="682.45349 906.665636 682.45349 964.683881 375.373701 964.780263 351.814022 865.628643 357.808807 964.780263 330.10259 964.806424 274.007659 741.469847 311.249603 964.806424 244.205015 964.829832 244.205015 964.12073 218.953513 831.518811 231.579264 964.12073 231.579264 964.829832 136.999738 964.854616 161.848383 832.791063 222.758367 711.543024 365.418513 581.854616 349.003639 647.140115 468.445792 685.654635 598.294927 757.00949 643.177163 811.305986"></polygon>
<polygon id="Fill-62" fill="#F3BACD" points="664.624336 416.520037 678.462151 434.425742 659.825886 464.492296 641.081261 434.425742 656.719259 425.714079"></polygon>
<polygon id="Fill-64" fill="#E99FB6" points="676.473735 488.719703 742.384034 384.822044 723.748643 448.559015 655.818818 521.302145"></polygon>
<polygon id="Fill-66" fill="#F2ACC4" points="676.473735 488.719703 655.818818 521.302145 619.741749 494.404262 653.007561 500.461092"></polygon>
<polygon id="Fill-68" fill="#FDF8F8" points="672.249422 266.000955 672.249422 270.535494 669.034435 269.603943 669.034435 265.799089 671.146592 264.012888"></polygon>
<path d="M659.017552,261.388378 L673.446107,261.388378 L679.066873,264.012626 L679.066873,264.028356 L679.066873,271.607476 L675.449029,275.94015 L658.81656,275.10123 L655.212698,267.895254 L656.610899,262.941255 L659.017552,261.388378 Z M672.249772,266.000692 L671.146941,264.012626 L669.034784,265.798827 L669.034784,269.60368 L672.249772,270.535231 L672.249772,266.000692 Z" id="Fill-70" fill="#D04074"></path>
<polygon id="Fill-72" fill="#E99FB6" points="664.624336 416.520037 667.031862 413.70878 667.046718 413.70878 678.462151 412.777229 678.462151 434.425742"></polygon>
<polygon id="Fill-74" fill="#E97EA1" points="667.031775 413.708955 664.624248 416.520211 656.719172 425.71338 641.081173 434.425917 603.109543 431.615534 588.976357 423.601223 627.165583 423.601223 642.788726 419.702865 655.213485 415.417381"></polygon>
<polygon id="Fill-76" fill="#F3BACD" points="641.080911 434.425917 659.825537 464.492471 615.533166 464.492471 626.963455 449.148968 614.49238 436.677894"></polygon>
<polygon id="Fill-78" fill="#E97EA1" points="659.623497 257.38166 676.054974 257.38166 715.035057 271.809342 707.658675 278.176397 707.642946 278.176397 703.947327 281.375655 691.584613 278.564398 684.829557 280.537608 681.909939 281.391385 676.100416 283.084081 639.185301 280.382059 639.185301 274.107634 658.816036 275.10123 675.448505 275.94015 692.283713 270.209276 679.067223 264.028356 679.067223 264.012626 673.445583 261.388378 659.017901 261.388378 658.08635 257.78539"></polygon>
<polygon id="Fill-80" fill="#E97EA1" points="658.086525 257.785303 659.017202 261.388291 656.611423 262.941168 639.185475 274.107546 628.097745 265.581145"></polygon>
<polygon id="Fill-82" fill="#FDF8F8" points="655.213135 267.895516 658.816123 275.101492 639.185388 274.107896 656.611336 262.941517"></polygon>
<polygon id="Fill-84" fill="#EC8EAD" points="630.861551 327.37619 620.953552 319.906303 620.953552 260.084294 628.097483 265.581844 639.185213 274.107372 639.185213 280.381796 639.185213 286.532131 639.185213 313.414284 655.212961 345.748545"></polygon>
<polygon id="Fill-86" fill="#EF9AB6" points="655.213135 345.748894 630.861726 345.748894 630.861726 327.376539"></polygon>
<polygon id="Fill-88" fill="#E86E97" points="649.497991 409.406954 667.838886 412.776617 667.047155 413.709042 667.031425 413.709042 653.908439 413.693312 626.652268 421.194658 588.588007 421.194658 602.317462 415.417468 620.348132 413.693312 626.963368 409.406954"></polygon>
<polygon id="Fill-90" fill="#E34C82" points="643.487476 349.584945 643.487476 355.37699 623.34465 359.275348 633.051657 349.584945"></polygon>
<polygon id="Fill-92" fill="#F1A9C1" points="641.080911 227.625506 622.956737 247.457233 612.737639 234.132382"></polygon>
<polygon id="Fill-94" fill="#EC8EAD" points="633.424278 247.457582 628.097134 265.581757 620.953203 260.084207 622.956125 247.457582"></polygon>
<path d="M630.861551,345.748894 L655.212961,345.748894 L655.212961,356.355993 L644.699367,363.935113 L619.741487,363.935113 L615.393958,368.903969 L611.47987,365.502846 L613.886523,362.737904 L630.861551,345.748894 Z M643.487301,349.585207 L633.051482,349.585207 L623.344475,359.27561 L643.487301,355.377252 L643.487301,349.585207 Z" id="Fill-96" fill="#EB88A9"></path>
<polygon id="Fill-98" fill="#EF9AB6" points="630.861551 345.748894 613.886523 362.737904 597.503108 346.353616 613.281801 350.858443"></polygon>
<polygon id="Fill-100" fill="#E99FB6" points="619.741837 363.934764 630.8619 396.05143 626.963543 409.406866 620.347432 413.693225 621.946624 402.869405 621.946624 394.451364 615.393433 368.904493"></polygon>
<polygon id="Fill-102" fill="#F3BACD" points="626.963193 449.148706 615.532904 464.493083 579.611385 464.493083 557.823051 452.161828 532.275306 425.713992 546.610357 425.512126 581.413316 443.542796 581.413316 431.817137 591.492594 436.677631 614.492118 436.677631"></polygon>
<polygon id="Fill-104" fill="#F2ACC4" points="621.946974 394.451277 621.946974 402.869318 620.347782 413.694011 615.843829 411.581855 603.108843 401.269252 603.108843 389.637098 609.678638 363.934676 611.479695 365.503283 615.393783 368.904405"></polygon>
<polygon id="Fill-106" fill="#E86E97" points="616.309429 120.653467 608.529317 124.504635 567.90198 86.9524647 573.229124 82.2938354"></polygon>
<polygon id="Fill-108" fill="#E99FB6" points="615.843479 411.581418 588.774317 411.581418 553.008348 401.967915 566.038703 366.340892 579.611734 366.340892 597.797954 363.935113 609.678289 363.935113 603.109368 389.637534 603.109368 401.268815"></polygon>
<polygon id="Fill-110" fill="#E97EA1" points="603.109193 431.615709 641.080824 434.426092 614.492293 436.678068 591.492768 436.678068 570.852707 421.303106 588.976881 423.601398"></polygon>
<polygon id="Fill-112" fill="#EB88A9" points="597.502759 346.353965 613.887047 362.738254 611.480394 365.503195 609.678463 363.934589 591.492244 350.857919 591.492244 346.353965"></polygon>
<polygon id="Fill-114" fill="#E34C82" points="609.678638 363.934764 597.797429 363.934764 581.413141 354.616631 591.492419 350.858094"></polygon>
<polygon id="Fill-116" fill="#E86E97" points="588.774754 411.581418 615.843916 411.581418 620.347869 413.693574 602.3172 415.41773 588.588619 421.19492 573.803522 419.703215"></polygon>
<polygon id="Fill-118" fill="#E86E97" points="601.121214 128.169756 595.048654 131.182878 563.988504 103.026615 568.802683 98.9727072"></polygon>
<polygon id="Fill-120" fill="#D11F69" points="600.049756 659.971914 466.722597 614.670218 368.649318 593.844021 379.784237 556.540905 390.298705 521.301883 416.746542 556.7585"></polygon>
<polygon id="Fill-122" fill="#EC9CB7" points="597.797604 219.907002 597.503108 260.084294 577.064912 240.547064 554.825659 231.833653"></polygon>
<polygon id="Fill-124" fill="#EB88A9" points="597.797604 363.934764 579.611385 366.341417 569.345971 357.396429 569.345971 346.35414 591.492594 346.35414 591.492594 350.858094 581.413316 354.616631"></polygon>
<polygon id="Fill-126" fill="#E86E97" points="597.502759 310.277596 597.502759 319.595728 588.976357 327.70267 569.346496 346.353791 569.346496 357.396079 579.611909 366.341067 566.038877 366.341067 556.22351 351.494799"></polygon>
<polygon id="Fill-128" fill="#EC8EAD" points="597.502759 260.083945 597.502759 310.277596 556.22351 351.494799 566.038877 366.341067 554.219714 366.341067 543.69039 349.584508 569.346496 317.343751 569.346496 302.77625 584.270538 290.445869 584.270538 264.789763 588.774492 263.189698"></polygon>
<polygon id="Fill-130" fill="#EF9AB6" points="588.976532 327.702582 597.502933 346.353703 591.492419 346.353703 569.34667 346.353703"></polygon>
<polygon id="Fill-132" fill="#E980A2" points="597.502759 260.083945 588.774492 263.189698 554.825309 231.834177 577.064562 240.546714"></polygon>
<polygon id="Fill-134" fill="#F2B0C7" points="488.356255 317.949609 488.356255 370.209101 488.356255 421.909313 477.469516 400.150692 477.469516 277.819507 467.328193 265.581757 467.343923 265.581757 483.0763 243.155494 483.432841 142.146867 501.914431 124.831028 568.942416 124.831028 591.492768 132.937969 505.921149 150.579764 497.239198 171.42169 497.239198 240.748842 488.356255 261.589894"></polygon>
<polygon id="Fill-136" fill="#E5618D" points="591.492331 436.677981 581.413053 431.817486 556.316228 419.702953 588.774579 411.581156 573.803347 419.702953 570.85227 421.303019"></polygon>
<polygon id="Fill-138" fill="#F2ACC4" points="588.774754 411.581418 556.316403 419.703215 546.61027 425.511864 532.276093 425.713729 532.276093 406.471869 538.115328 389.637534 554.219976 366.340892 566.038266 366.340892 553.008785 401.967915"></polygon>
<polygon id="Fill-140" fill="#E86E97" points="554.825397 231.83409 588.774579 263.18961 584.270626 264.789676 578.571211 261.466328 569.346583 256.077139 558.723755 249.864759 523.563381 249.864759 496.602579 271.809516 488.355818 261.590418 521.155854 231.83409"></polygon>
<polygon id="Fill-142" fill="#E25B8A" points="584.270888 264.789589 584.270888 290.445694 569.345971 302.776075 569.345971 285.83338 569.345971 279.325631 573.601744 279.325631 578.571473 271.809429 578.571473 261.466241"></polygon>
<polygon id="Fill-144" fill="#F2B0C7" points="521.559672 443.946352 582.469656 521.302669 518.344685 473.608302 488.355905 421.908964 488.355905 370.208752"></polygon>
<polygon id="Fill-146" fill="#EC8EAD" points="464.517111 394.544257 454.422977 326.491216 454.422977 307.885537 454.422977 250.004405 467.328368 265.581232 477.469691 277.818982 477.469691 400.151041 488.35643 421.908789 518.345209 473.609001 582.469307 521.302494 518.143344 493.642593 471.862907 432.919618 466.691313 409.251579"></polygon>
<polygon id="Fill-148" fill="#E99FB6" points="581.413316 431.817049 581.413316 443.542709 546.610357 425.512039 556.31649 419.70339"></polygon>
<polygon id="Fill-150" fill="#E25B8A" points="578.571124 261.465979 578.571124 271.809167 573.601395 279.325369 569.346496 279.325369 569.346496 268.671954 569.346496 256.076789"></polygon>
<polygon id="Fill-152" fill="#E5618D" points="573.803609 419.703128 588.587832 421.194833 626.652967 421.194833 653.908265 413.693487 667.032124 413.709217 655.212961 415.417643 642.788201 419.703128 627.165932 423.601485 588.976707 423.601485 570.852532 421.303193"></polygon>
<polygon id="Fill-154" fill="#F7C7D8" points="569.346321 302.77625 569.346321 317.343751 543.690215 349.584508 554.219539 366.341067 538.114891 389.636835 532.275656 406.472043 532.275656 425.713904 511.341098 366.341067 511.341098 306.270877 553.412078 306.270877"></polygon>
<polygon id="Fill-156" fill="#E97EA1" points="569.346321 279.325805 569.346321 285.832681 541.997519 291.252456 533.750757 289.451399 527.057746 287.992027 524.324264 287.401287 517.149748 285.832681 496.602317 290.600545 516.310827 277.539604 530.039409 280.583312 530.039409 280.599042 542.78925 283.425155 546.920932 282.788973"></polygon>
<polygon id="Fill-158" fill="#F0ABC2" points="569.346321 256.076877 569.346321 268.672042 546.299607 264.789414 530.567229 268.097032 516.310827 277.540129 496.602317 290.601069 496.602317 271.809254 523.563119 249.865371 558.723492 249.865371"></polygon>
<path d="M551.207029,272.306227 L551.207029,278.906608 L546.92067,282.789236 L542.789861,283.425417 L530.039147,280.599304 L530.039147,280.583574 L527.243619,274.853574 L530.566967,268.097644 L546.299345,264.789152 L548.691142,266.295713 L551.207029,272.306227 Z M547.448491,276.312946 L547.448491,270.753351 L544.824243,270.753351 L542.836177,272.042317 L542.836177,276.499081 L545.725209,277.819507 L547.448491,276.312946 Z" id="Fill-160" fill="#D04074"></path>
<polygon id="Fill-162" fill="#FDF8F8" points="548.691229 266.2958 569.346146 279.326155 546.920757 282.789323 551.207116 278.906695 551.207116 272.306315"></polygon>
<polygon id="Fill-164" fill="#E97EA1" points="546.299607 264.789589 569.346321 268.672217 569.346321 279.325631 548.691404 266.29615"></polygon>
<polygon id="Fill-166" fill="#FDF8F8" points="547.448666 270.753089 547.448666 276.312683 545.72451 277.819244 542.836352 276.499693 542.836352 272.042055 544.824418 270.753089"></polygon>
<polygon id="Fill-168" fill="#E97EA1" points="533.750845 289.451399 514.81921 296.8907 527.057834 287.992027"></polygon>
<polygon id="Fill-170" fill="#FDF8F8" points="530.567229 268.097294 527.243882 274.853224 530.039409 280.584099 516.310827 277.539517"></polygon>
<polygon id="Fill-172" fill="#F1A9C1" points="527.057659 287.991678 514.819909 296.89035 533.75067 289.451049 541.997431 291.25298 569.346233 285.833205 569.346233 302.7759 553.411991 306.270528 511.341011 306.270528 501.634878 295.943069 524.324177 287.401812"></polygon>
<polygon id="Fill-174" fill="#E97EA1" points="524.324264 287.40155 501.634965 295.942807 517.149748 285.832943"></polygon>
<polygon id="Fill-176" fill="#EC9CB7" points="521.156029 231.83409 488.355993 261.590418 497.238935 240.748492"></polygon>
<polygon id="Fill-178" fill="#F1A9C1" points="517.149311 285.832943 501.634528 295.942807 496.602754 290.600807"></polygon>
<polygon id="Fill-180" fill="#F3BACD" points="488.356255 370.208839 496.603016 290.600545 501.63479 295.943419 511.340924 306.270877 511.340924 366.341067 532.275481 425.713904 557.823226 452.161741 579.611559 464.492996 619.741662 494.404 655.818731 521.301883 582.469132 521.301883 521.560022 443.946439"></polygon>
<polygon id="Fill-182" fill="#F3BACD" points="496.602579 290.600894 488.355818 370.209189 488.355818 317.949697 488.355818 261.589981 496.602579 271.80908"></polygon>
<polygon id="Fill-184" fill="#EC8EAD" points="483.433016 142.147042 483.075601 243.155669 467.343224 265.581931 467.328368 265.581931 454.422977 250.00423 470.651716 228.899267 470.651716 224.814774 470.651716 220.31082 470.651716 213.198349 470.651716 208.694396 470.651716 199.749408 470.651716 195.307499 470.651716 168.796744 482.98297 142.566502"></polygon>
<polygon id="Fill-186" fill="#C50D5F" points="470.651716 228.899267 454.422977 250.00423 454.422977 307.886236 454.422977 326.491041 432.18285 293.598374 432.18285 258.438001 411.543663 211.691788 411.543663 152.971736 451.813585 92.8692124 492.704833 59.2005439 549.203495 30.5933613 596.105257 47.971246 596.105257 36.448326 615.238757 50.5806377 615.238757 33.4509337 651.003853 63.5017583 678.959124 54.4947253 745.086144 80.3369664 761.921352 129.039786 761.921352 216.801337 745.661154 265.581931 742.384121 275.412155 725.254417 239.350816 725.254417 173.518292 690.389414 123.014416 654.017849 101.986354 616.309255 120.653204 573.228949 82.2935732 567.901805 86.9522026 608.529143 124.505247 601.121301 128.169406 568.80277 98.9732315 563.988591 103.026265 595.048742 131.182528 591.492069 132.93727 568.94259 124.831202 501.913731 124.831202 483.433016 142.147042 482.98297 142.566502 470.651716 168.796744 470.651716 195.307499 454.935068 184.420761 452.993317 187.495928 470.651716 199.749408 470.651716 208.694396 452.31082 195.307499 450.21352 198.615118 470.651716 213.198349 470.651716 220.31082 452.993317 208.181431 451.114485 211.288057 470.651716 224.814774"></polygon>
<polygon id="Fill-188" fill="#E86E97" points="470.651716 220.310645 470.651716 224.814599 451.114485 211.287883 452.993317 208.18213"></polygon>
<polygon id="Fill-190" fill="#E86E97" points="470.651716 208.694308 470.651716 213.198262 450.21352 198.61503 452.31082 195.307412"></polygon>
<polygon id="Fill-192" fill="#E86E97" points="470.651716 195.307063 470.651716 199.748971 452.993317 187.495491 454.935068 184.420324"></polygon>
<polygon id="Fill-194" fill="#F1A9C1" points="466.691575 409.251666 466.72216 409.407216 456.224296 409.407216 426.763337 353.404916 426.763337 307.280028 432.183112 293.597763 454.422365 326.491304 441.99848 326.491304 435.7861 345.158154 442.805941 366.340892 452.418569 366.340892 452.418569 388.84493 458.227218 394.45084 463.492317 394.528615"></polygon>
<polygon id="Fill-196" fill="#EC8EAD" points="466.691575 409.251666 463.492317 394.528615 464.517373 394.544344"></polygon>
<polygon id="Fill-198" fill="#E86E97" points="454.422715 352.970338 463.491793 394.529226 458.227568 394.451451 452.418919 388.845541 452.418919 366.341504 442.80629 366.341504 435.78645 345.158766 441.997956 326.491041 454.422715 326.491041"></polygon>
<polygon id="Fill-200" fill="#EC8EAD" points="454.422715 326.491216 464.516849 394.544257 463.491793 394.528527 454.422715 352.970512"></polygon>
<polygon id="Fill-202" fill="#C81862" points="375.373701 964.854616 357.808807 964.854616 351.814022 865.854616"></polygon>
<polygon id="Fill-204" fill="#C81862" points="274.007659 740.854616 330.10259 964.854616 311.249603 964.854616"></polygon>
<polygon id="Fill-206" fill="#C81862" points="244.205364 964.145803 244.205364 964.854616 231.57874 964.854616 231.57874 964.145803 218.952989 831.854616"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

6
examples/resources/images/svg/persons.js Normal file
View File

@@ -0,0 +1,6 @@
import p1 from './p1.svg'
import p2 from './p2.svg'
import p3 from './p3.svg'
import p4 from './p4.svg'
export { p1, p2, p3, p4 }

13
examples/yarn.lock
View File

@@ -1646,6 +1646,11 @@ cyclist@~0.2.2:
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
d3-ease@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
integrity sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ==
d@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -6113,10 +6118,10 @@ three.meshline@^1.2.0:
resolved "https://registry.yarnpkg.com/three.meshline/-/three.meshline-1.2.0.tgz#89a0c9d67d8062e5649dc0ac9aa16f14e7c199b5"
integrity sha512-E7s9xwgjUhQWIvXBMIdCOIvpT1qV9UlntzaaJTWzJvYtvI2ZvVsX8EM8FxoiG5aptXuKbp5osnvcJCCkYOjmBA==
three@^0.103.0:
version "0.103.0"
resolved "https://registry.yarnpkg.com/three/-/three-0.103.0.tgz#63b3dbccc861caad93269618061a73dadebae71b"
integrity sha512-4WKRHTMt96sp+lX+Hx/eHtN9CWFyejDqr1ikgxZUJIkKEHVglSE7FY8n81NC6yWXqVSjUIQQppaxsoUe26Zi9g==
three@^0.104.0:
version "0.104.0"
resolved "https://registry.yarnpkg.com/three/-/three-0.104.0.tgz#9ad1da492153b753a89e0df066631215bd9d9087"
integrity sha512-q617IMBC5k40U2E9UC4/LtmhzTOOLB1jGMIooUL+QrhZ7abiGCSDrKrpCDt9V8RTl6xw+0FYfA1PYsIPKbQOgg==
through2@^2.0.0:
version "2.0.5"

22
src/canvas.js
View File

@@ -82,6 +82,9 @@ export const Canvas = React.memo(
invalidate: () => invalidate(state),
})
// This is used as a clone of the current state, to be distributed through context and useThree
const sharedState = useRef(state.current)
// Writes locals into public state for distribution among subscribers, context, etc
useEffect(() => {
state.current.ready = ready
@@ -140,6 +143,8 @@ export const Canvas = React.memo(
state.current.camera.updateProjectionMatrix()
invalidate(state)
}
// Only trigger the context provider when necessary
sharedState.current = { ...state.current }
}, [ready, size, defaultCam])
// This component is a bridge into the three render context, when it gets rendererd
@@ -156,14 +161,11 @@ export const Canvas = React.memo(
return null
}, [])
// Only trigger the context provider when necessary
const sharedState = useMemo(() => ({ ...state.current }), [size, defaultCam])
// Render v-dom into scene
useEffect(() => {
if (size.width > 0 && size.height > 0) {
render(
<stateContext.Provider value={sharedState}>
<stateContext.Provider value={sharedState.current}>
<IsReady />
{typeof children === 'function' ? children(state.current) : children}
</stateContext.Provider>,
@@ -185,7 +187,17 @@ export const Canvas = React.memo(
/** Intersects interaction objects using the event input */
const intersect = useCallback((event, prepare = true) => {
if (prepare) prepareRay(event)
return defaultRaycaster.intersectObjects(state.current.scene.__interaction, true).filter(h => h.object.__handlers)
const intersects = defaultRaycaster.intersectObjects(state.current.scene.__interaction, true)
const hits = []
for (let intersect of intersects) {
let object = intersect.object
// Bubble event up
while (object) {
if (object.__handlers) hits.push({ ...intersect, object })
object = object.parent
}
}
return hits
})
/** Handles intersections by forwarding them to handlers */