0
4

1 回答 1

0

工作代码

（@CD..在 SO 上，@primos在 Discord 上寻求他们的帮助！）

范围滑块和绑定变量只是测试将文本和气球一起移动的一些反应性乐趣。

/public/index.html

<!doctype html>
<html>
<head>
  <meta charset='utf8'>
  <meta name='viewport' content='width=device-width'>

  <title>Svelte app</title>

  <link rel='icon' type='image/png' href='/favicon.png'>
  <link rel='stylesheet' href='/global.css'>
  <link rel='stylesheet' href='/bundle.css'>

  <script src="https://d3plus.org/js/d3.js"></script>     <!--  -->
  <script src="https://d3plus.org/js/d3plus.js"></script> <!--  -->

  <script defer src='/bundle.js'></script>
</head>

<body>
</body>
</html>

App.svelte

<script>
  import { onMount } from 'svelte';               // 

  onMount(() => {                                 // 
    d3plus.textwrap()
      .container(d3.select("#circleResize"))
      .resize(true)
      .draw();
  });

  export let name;
  let i = 0;
  const minX = 293;
  let windowWidth;
  let skyHeight;
</script>

<svelte:window bind:innerWidth={windowWidth}/>

<style>
  svg {
    font-family: "Helvetica", "Arial", sans-serif;
    height: 90%;
    width: 100%;
    background: transparent;
  }

  .type {
    fill: #888;
    text-anchor: middle;
  }

  .shape {
    fill: red;
    stroke: black;
  }

  .invis {
    fill: transparent;
    stroke: transparent;
    stroke-width: .1rem;
  }

  .title {
    fill: #ffebeb;
  }
</style>

<label>
    <input type="range" bind:value={i} max={windowWidth - (2 * minX)}>
</label>

<div>{i}</div>

<svg>
  <path id="Union" fill-rule="evenodd" clip-rule="evenodd" transform="translate({i},0)" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>

  <circle class="shape invis" r="280px" cx="{minX}" cy="300px"></circle>

  <text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem" transform="translate({i},0)">
    Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
  </text>

</svg>
于 2019-07-20T08:15:44.943 回答