mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 17:30:59 +01:00
62 lines
801 B
Svelte
62 lines
801 B
Svelte
|
<script>
|
||
|
export let x, y;
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.grid-line {
|
||
|
stroke:#ccc;
|
||
|
opacity: 0.5;
|
||
|
stroke-width: 2;
|
||
|
}
|
||
|
|
||
|
.grid-line-xy {
|
||
|
stroke: tomato;
|
||
|
stroke-width: 2;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<svelte:options namespace="svg" />
|
||
|
|
||
|
<rect
|
||
|
x=0
|
||
|
y=0
|
||
|
width=1400
|
||
|
height=1800
|
||
|
stroke=#ccc
|
||
|
style="opacity: 0.5"
|
||
|
fill=none
|
||
|
stroke-width=2
|
||
|
/>
|
||
|
|
||
|
{#each { length: 8 } as _, i}
|
||
|
{#if i < 6}
|
||
|
<path
|
||
|
d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
|
||
|
class="grid-line"
|
||
|
/>
|
||
|
{/if}
|
||
|
<path
|
||
|
d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
|
||
|
class="grid-line"
|
||
|
/>
|
||
|
{/each}
|
||
|
|
||
|
<path
|
||
|
style="transform: translateX({x+200}px)"
|
||
|
d="M0 0 L0 1800"
|
||
|
class="grid-line-xy"
|
||
|
/>
|
||
|
<path
|
||
|
style="transform: translateY({y}px)"
|
||
|
d="M0 400 L1400 400"
|
||
|
class="grid-line-xy"
|
||
|
/>
|
||
|
<rect
|
||
|
x=200
|
||
|
y=400
|
||
|
width=1000
|
||
|
height=1000
|
||
|
stroke=#999
|
||
|
fill=none
|
||
|
stroke-width=2
|
||
|
/>
|