react打造一个城市插画点击着色效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：react打造一个城市插画点击着色效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.wrapper {
  width: 100vw;
  height: 100vh;
  background: #eee;
  display: flex;
  box-sizing: border-box;
}

.container {
  display: block;
  width: 80%;
  margin: 0 auto;
  height: auto;
}

.house {
  cursor: pointer;
  font-size: 30px;
  font-family: "Oak", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.house .bg-fill {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.house text {
  fill: #333;
  transition: fill 0.3s ease-in;
}
.house:hover .bg-fill, .house.active .bg-fill {
  opacity: 1;
}
.house:hover text, .house.active text {
  fill: #333;
}
</style>

 

</head>

<body>
  <div class="wrapper"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-with-addons.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.parallax.js"></script>
      <script>
class CitySvg extends React.Component {
  componentDidMount() {
    this.houses = [this.houseOne, this.houseTwo, this.houseThree, this.houseFour, this.houseFive,
    this.houseSix, this.houseSeven, this.wheel2];
    this.index = '10';
    $('.container').parallax({ scalarX: 5, scalarY: 5 });
    TweenMax.set(this.wheel, { transformOrigin: '50% 50%' });
    TweenMax.to(this.wheel, 100, { rotation: '360', ease: Linear.easeNone, repeat: -1 });
  }

  mouseAction(evt) {
    const index = evt.currentTarget.dataset.project;
    console.log(this.houses[index]);
    this.houses[index].classList.toggle('active');
  }


  render() {
    return /*#__PURE__*/(
      React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ref: c => this.wrapper = c, viewBox: "0 0 1031.41 441.18", className: "container" }, /*#__PURE__*/
      React.createElement("g", { className: "house", id: "house-seven", ref: h => this.houseSeven = h, "data-project": 6, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill-2", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#e82c84", d: "M904.92 271.63H843.7v5.98h4.06v112.88h53.1V277.61h4.06v-5.98z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#f079b2", d: "M844.65 272.59h59.07v5.02h-59.07zm23.92 27.16V285.5h-12.44v14.25h-2.22v4.22h16.32v-4.22h-1.66zm24.08 0V285.5h-12.44v14.25h-2.22v4.22h16.31v-4.22h-1.65zm0 27.38v-14.24h-12.44v14.24h-2.22v4.23h16.31v-4.23h-1.65zm-23.96 0v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm0 27.62V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm24.42 0V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm-24.42 26.81v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm11.69-14.49h12.21v23.51h-12.21z" })), /*#__PURE__*/

      React.createElement("g", { id: "stroke-2" }, /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M869.7 380.19V367.6a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm.07-29.93v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 356.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-31.15v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 329.15a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1 1.06zm.08-30.55v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 301.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-3.36v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06z" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M899 281.49c0-1.89-.63-2.25-2.35-2.25q-22.16.09-44.33 0c-2 0-2.52.58-2.51 2.56.08 17.43 0 34.86 0 52.29v53c0 1.75.41 2.35 2.27 2.33q12.27-.15 24.55 0c2 0 2.37-.69 2.34-2.49-.1-6.29 0-12.58-.07-18.87 0-1.77.55-2.44 2.35-2.37 3.1.11 6.22.16 9.32 0 2.25-.12 3.06.53 3 2.9-.16 6.21 0 12.43-.11 18.64 0 2.23 1 2.24 2.64 2.17s2.9.37 2.9-2.14q-.13-52.91 0-105.77zm3.58-6.28c0-1.78-1.24-1.38-2.22-1.38h-52c-1 0-2.23-.34-2.18 1.43s1.2 1.26 2.11 1.26h52c.94-.01 2.26.51 2.29-1.31z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M905.31 279.27c.92-.47 1.53-7.83 0-8.19s-39.21 0-58.82 0c-3 0-3 0-3 3v2.5c-.14 1.74.15 3 2.38 2.76 1-.13 1.32.5 1.27 1.4v75.41c0 .45-.07.9-.11 1.35v2.81c0 9.16.07 18.33.14 27.49 0 1.19-.43 2.64-1.6 2.6-1.89-.06-3.79 0-5.68 0v.79h65.5v-.79a13.2 13.2 0 0 0-1.59 0c-1.62.19-2.07-1.57-2.06-3.12V281.4c-.09-3.17 2.67-1.66 3.57-2.13zm-14.07 109a1.15 1.15 0 0 1-1.15 1.15h-7.58a1.15 1.15 0 0 1-1.15-1.15v-18.74a1.15 1.15 0 0 1 1.15-1.15h7.58a1.15 1.15 0 0 1 1.15 1.15zm4.84 1.08c-1.59.07-2.7 0-2.64-2.17.15-6.21 0-12.43.11-18.64.06-2.37-.74-3-3-2.9-3.1.17-6.21.12-9.32 0-1.8-.06-2.37.61-2.35 2.37.08 6.29 0 12.58.07 18.87 0 1.8-.35 2.52-2.34 2.49q-12.27-.17-24.55 0c-1.86 0-2.27-.58-2.27-2.33.06-17.66 0-35.31 0-53v-52.29c0-2 .47-2.57 2.51-2.56q22.16.14 44.33 0c1.72 0 2.35.36 2.35 2.25q-.09 52.86 0 105.71c0 2.57-1.41 2.13-2.9 2.2zm4.21-112.83h-52c-.91 0-2.06.36-2.11-1.26s1.17-1.43 2.18-1.43h52c1 0 2.25-.4 2.22 1.38s-1.35 1.3-2.29 1.3z" }))), /*#__PURE__*/


      React.createElement("g", { className: "house", id: "house-six", ref: h => this.houseSix = h, "data-project": 5, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#bd9ec9", d: "M751.19 225.73h27.99v165.55h-27.99z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#906c99", d: "M751.16 264.15l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm.5 22.38l-.21 11.61 28.27-27.75-.1-10.55-27.96 26.69zm-.33 23.54l-.21 11.6 28.27-27.74-.1-10.55-27.96 26.69zm-.17 23.37l-.21 11.6 28.28-27.74-.11-10.56-27.96 26.7zm0 22.38l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm-.16 23.54l-.21 11.6 28.27-27.75-.1-10.55-27.96 26.7zm14.99 8.54l13.33-12.02-1.32 15.47-13.16-.66 1.15-2.79zm-15.31-145.49l.33 10.21 19.26-18.6-13.17.66-6.42 7.73z" })), /*#__PURE__*/

      React.createElement("path", { id: "stroke", fill: "#333", d: "M780 387.27q.1-54.82.06-109.63v-49.61c0-2.28-.68-3.21-3-3.07-2.76.16-5.55-.08-8.31.07-2.15.12-2.69-.72-2.68-2.77.08-13.86 0-27.72 0-41.58v-2.27c0-.76-.08-1.52-.93-1.56s-1.21.74-1.25 1.56v43.6c0 2.25-.49 3.2-2.92 3-2.84-.21-5.71 0-8.57-.07-1.77 0-2.62.58-2.66 2.46-.07 3.53.25 6.85.25 8.56v152.63a3.51 3.51 0 0 0 .81 2.4h29c.45-.62.2-2.09.2-3.72zm-25.8-159.95h21.67c2.52 0 2 1.73 2 3.15s.32 3-2 2.92c-3.69-.07-7.39 0-11.09 0-3.53 0-7.06-.09-10.58 0-2 .07-2.3-.92-2.1-2.48s-.8-3.6 2.1-3.59zm-2.09 55.13c-1-4.49 1.35-7.58 4.31-10.47 6.62-6.47 13.2-13 19.81-19.46a1.85 1.85 0 0 1 1.59-.78v6.37a2.92 2.92 0 0 1-1.12 2.15l-22.92 22.94c-.35.35-.66.91-1.2.76-.79-.23-.36-1-.47-1.51zm0-27.4a3.37 3.37 0 0 1 1.17-2.64q7.75-7.74 15.46-15.51c1-1 6.86-2 8.13-1.21s.1 1.27-.31 1.7q-3.11 3.28-6.33 6.47-8.38 8.33-16.8 16.63a1.19 1.19 0 0 1-1.32.41v-5.85zm13.52-18.18q-6.42 6.68-12.88 13.32l-.81-.59v-6.48a3 3 0 0 1 1.12-2.17 15.36 15.36 0 0 0 2.47-2.5c2.41-3.9 6.23-2.86 9.73-2.9 1.16 0 .89.76.36 1.32zm9.21 14c-7.06 6.4-13.59 13.4-20.36 20.13-.62.62-1.09 1.5-2.43 1.65.16-3.82-.75-7.41 2.86-10.69 7.24-6.58 14-13.75 20.89-20.66.5-.5.85-1.27 2-1.26.16 4 .62 7.51-3 10.83zm-21.33-15.6c.77 0 1.33.25 1.2 1.17-.17 1.2-1.18 1.5-2.1 1.89-.89 0-.84-.62-.88-1.2a1.55 1.55 0 0 1 1.77-1.86zm.88 50.43c7.2-7 14.27-14.22 21.42-21.32.49-.48.87-1.5 1.74-1.1.7.31.26 1.21.36 1.84.59 3.87-.81 6.68-3.74 9.41-6.75 6.28-13.11 13-19.65 19.5-.63.63-1.24 1.9-2.1 1.56-1.06-.43-.3-1.78-.46-2.72a10.42 10.42 0 0 1 0-1.42c-.63-2.2.61-4 2.46-5.74zm22.43 55.33l-23.14 23.1c-.35.35-.65.86-1.23.62s-.35-.85-.42-1.32c-.72-4.69 1.13-8 4.72-11.13 6.39-5.66 12.21-12 18.23-18a19.21 19.21 0 0 0 1.87-2.65l1 .75v6.73a2.71 2.71 0 0 1-1 1.93zm-2.41 13.93c-7.08 6.28-13.51 13.29-20.23 20-.56.56-.91 1.46-2.11 1.41-.21-4-.59-7.56 3-10.86 7-6.36 13.49-13.33 20.21-20a5 5 0 0 1 2.29-1.79c.35 4.14.73 7.8-3.16 11.22zm-22.35-3.82c-.64-3.81.84-6.54 3.66-9.19 7-6.61 13.7-13.57 20.52-20.38.33-.33.57-.87 1.42-.67.18 4 .56 7.53-3.23 10.89-7.14 6.31-13.59 13.41-20.33 20.17-.49.5-.88 1.5-1.75 1.06-.58-.34-.14-1.24-.25-1.88zm24.53-33.11l-22.77 22.75c-.4.4-.71 1.07-1.41.79s-.37-1-.44-1.55c-.52-3.89.59-6.86 3.67-9.7 7.09-6.53 13.73-13.54 20.55-20.35.34-.34.73-.64 1.64-1.43v7.4c0 1-.62 1.51-1.2 2.09zm1.2-37a2.67 2.67 0 0 1-.87 2l-23.67 23.7a7 7 0 0 1-1.22.69c.1-3.84-.88-7.26 2.44-10.37 7.46-7 14.56-14.37 21.82-21.58.33-.33.55-.87 1.5-.8v6.42zm-22.59 26.6c7.21-6.54 13.9-13.65 20.8-20.52.41-.41.85-.78 1.83-1.68v7.42a2.38 2.38 0 0 1-.89 1.73l-23.66 23.68a5.72 5.72 0 0 1-1.26.67c-.27-4.29-.45-7.94 3.22-11.27zm.48 11.21c7.32-7 14.25-14.33 21.34-21.54l.75.45v6.47a2.93 2.93 0 0 1-1.18 2.12l-22.68 22.77c-.39.39-.75 1.07-1.41.81s-.31-1-.39-1.56c-.52-3.79.69-6.71 3.61-9.48zm-3.34 69c-1-.36-.33-1.47-.45-2.24-.55-3.58.73-6.21 3.44-8.77 7.49-7 14.66-14.44 22.29-22 .49 4.7.51 8.4-3.35 11.83-7.06 6.28-13.49 13.28-20.2 20-.47.48-.93 1.49-1.66 1.22zm6 2.18a35.58 35.58 0 0 0-4.1 0l23.5-23.45c-.1 4.06 1.06 7.8-2.78 10.89a89.93 89.93 0 0 0-10 9.92c-1.85 2-3.81 3-6.55 2.67zm7.79-.17l11.46-11c1.65 7.9-1.49 12.72-11.4 11z" })), /*#__PURE__*/

      React.createElement("g", { className: "house", id: "house-five", ref: h => this.houseFive = h, "data-project": 4, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill-3", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#e5432e", d: "M685.51 388.52v-95.36l6.31-.93 4.44-6.78 2.34-10.99 2.57.7 1.64-5.61 4.44-2.33 5.37 1.4 2.57 4.21v2.33l2.81-.46 2.34 10.98 3.27 4.44 3.04 2.11 3.74 1.4 1.16 2.57v91.15l-1.63 3.04-38.8 1.17-5.61-3.04z" }), /*#__PURE__*/
      React.createElement("g", { fill: "#eaa27d" }, /*#__PURE__*/
      React.createElement("path", { d: "M703.27 288.49h10.28v11.45h-10.28zm-12.85 18.23h8.88v11.45h-8.88zm13.71-.46h8.72v12.11h-8.72zm13.44.82h9.03v11.19h-9.03zm-26.78 18.27h8.62v16.83h-8.62zm13.13.1h9.24v16.73h-9.24zm13.14-.31h9.65v17.03h-9.65zm-26.17 22.27h8.31v18.57h-8.31zm13.24.21h8.93v18.16h-8.93zm13.54 0h8.83v18.27h-8.83zm-4.61 39.91v-17.75h-9.04v17.75h-2.15v2.57h13.34v-2.57h-2.15z" }), /*#__PURE__*/
      React.createElement("circle", { cx: "708.34", cy: "274.45", r: "1.95" }))), /*#__PURE__*/


      React.createElement("g", { id: "stroke-3", fill: "#333", "data-name": "stroke" }, /*#__PURE__*/
      React.createElement("path", { d: "M731.3 292.65l-.31-.26a3.89 3.89 0 0 0-2.37-.8h-1.12a9.31 9.31 0 0 1-1.29-.57c-3.45-1.87-4.93-5.58-5.57-7.16a18.19 18.19 0 0 1-1.12-8.92 3.72 3.72 0 0 0 .15-1.22 18.24 18.24 0 0 0-3.44 0 7.83 7.83 0 0 0-7.81-7.35h-.51a8 8 0 0 0-6.11 3.75 7.45 7.45 0 0 0-1 3.71 25.13 25.13 0 0 0-3.61-.18c-.16.17 0 1.17 0 1.17a25 25 0 0 1-1.41 9.07c-1 2.71-2.05 5.78-4.77 7.41l-.51.27h-2.09a4 4 0 0 0-4 4v92a3.94 3.94 0 0 0 3.94 3.94h40.25a3.94 3.94 0 0 0 3.94-3.94v-92a3.92 3.92 0 0 0-1.24-2.92zm-31.89-16.7c.23-.2 3.69.37 3.88.19s-.22-1.33-.22-1.33a5.48 5.48 0 0 1 .6-3.6 5.69 5.69 0 0 1 4.37-2.67h.37a5.71 5.71 0 0 1 4.87 2.79 5.78 5.78 0 0 1 .77 3.4 3.8 3.8 0 0 0-.09 1.17c.11.18 3.12-.21 3.29 0s.28 6 1.37 8.77c.72 1.8 2.41 6 6.55 8.26a11.57 11.57 0 0 0 1.86.8h1.59a1.7 1.7 0 0 1 1 .32l.21.17a1.75 1.75 0 0 1 .58 1.35v92a1.77 1.77 0 0 1-1.76 1.76h-40.24a1.77 1.77 0 0 1-1.76-1.76v-92a1.77 1.77 0 0 1 .49-1.22 1.75 1.75 0 0 1 1.27-.55h2.77l.13-.06a9.5 9.5 0 0 0 .92-.49c3.39-2 4.67-5.65 5.7-8.55s1.26-8.55 1.48-8.75z" }), /*#__PURE__*/
      React.createElement("path", { d: "M708.47 271.82a2.54 2.54 0 0 0-2.54 2.61 2.48 2.48 0 0 0 2.51 2.49 2.51 2.51 0 0 0 2.61-2.53 2.57 2.57 0 0 0-2.58-2.57zm.06 3.95a1.35 1.35 0 1 1 1.35-1.35 1.35 1.35 0 0 1-1.35 1.35zm-5.94 24.67h11.61l.73-.07a.7.7 0 0 0 .68-.67.63.63 0 0 0-.58-.75c-.93 0-.78-.58-.78-1.12v-9c0-.8-.23-1-1-1-3.12 0-6.24.05-9.36 0-.92 0-1.19.21-1.17 1.16.07 3 0 6 0 9 0 .33.24.85-.4.9s-1 .21-1 .84.77.62 1.27.71zm1.54-10.25a.88.88 0 0 1 .88-.88h6.93a.88.88 0 0 1 .88.88v7.92a.88.88 0 0 1-.88.88h-6.93a.88.88 0 0 1-.88-.88zm-14.39 28.91h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 10.84h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 10.84h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm-14.88 34.57h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 15.92h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 15.92h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm-14.88 39.66h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 17.18h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 17.18h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm16.07-53.58h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm0 2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm-31.72-2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm0 2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm11.83-20.32h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.12.42.22.42zm0 2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.12.41.22.42zm13.13-2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.13.42.22.42zm0 2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.13.41.22.42zm1.78 106.91h-1.76v-15a3.26 3.26 0 0 0-3.25-3.25h-4.42a3.26 3.26 0 0 0-3.25 3.25v15h-1.76a.59.59 0 0 0-.59.59v1.4a.59.59 0 0 0 .59.59h14.44a.59.59 0 0 0 .59-.59v-1.36a.59.59 0 0 0-.59-.63zm-11.25-15a2.16 2.16 0 0 1 2.16-2.16h3.88a2.16 2.16 0 0 1 2.16 2.16v15h-8.19zm10 16.81h-12a.545.545 0 0 1 0-1.09h12a.545.545 0 1 1 0 1.09z" }))), /*#__PURE__*/


      React.createElement("g", { className: "house", id: "house-four", ref: h => this.houseFour = h, "data-project": 3, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill-4", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#e4982f", d: "M488.89 390.11V337.9l-2.67-.5v-2.68l3.34-1.17 4.02-16.73 3.01-.17-.54-4.12 3.22-.9.17-3.18 4.18-.16.96 4.39 1.88-.55v3.52l25.7 1.14 4.12 16.96 2.71.61.2 2.81-2.81 1.4-.3 10.05 31.43 14.05.4 27.61-79.02-.17z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#f9cf47", d: "M495.02 345.98h12.53v13.29h-12.53zm21.64-.19h14.05v14.05h-14.05zm-.57 25.06h15.19v13.86h-15.19zm29.24.57h12.53v13.29h-12.53zm-9.2-37.59l-4.04-16.63-38.58.03-3.99 16.6h-3.23v3.34h52.9v-3.34h-3.06zm-36.69-25.38h4.7v2.59h-4.7zm7.92 79.32v-16.54h-11.77v16.54h-1v3.59h15.43v-3.59h-2.66zm29.21-37.88v3.78l30.98 12.08-.04-3.08-30.94-12.78z" })), /*#__PURE__*/

      React.createElement("g", { id: "stroke-4", "data-name": "stroke" }, /*#__PURE__*/
      React.createElement("rect", { width: "11.01", height: "12.27", x: "545.85", y: "371.84", fill: "none", rx: "1.11", ry: "1.11" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M528.89 371.65h-10.9a1.1 1.1 0 0 0-.69.25.69.69 0 0 0-.32.41 1.1 1.1 0 0 0-.1.46v2.28a1.25 1.25 0 0 0-.09.61c.06 1.11 0 2.22 0 3.33v3.59a.88.88 0 0 0 .26.81 1.11 1.11 0 0 0 .95.54h10.89a1.12 1.12 0 0 0 1.11-1.11v-10a1.12 1.12 0 0 0-1.11-1.17zm36.96-5.32q-13.56-5.29-27.09-10.66c-1.31-.52-1.31.11-1.2 1v28.61c0 1.26-.18 3.57.15 3.79.16.14 5.55.1 8.32.15h19.9c.81 0 1.08-.24 1.07-1.06 0-3.82.05-7.65 0-11.47 0-2.84-.08-5.69-.13-8.53.34-.97-.08-1.46-1.02-1.83zm-6.32 19.55l-.93.09h-14.71c-.63-.12-1.46 0-1.54-.91s.52-1 1.22-1.07.5-.72.5-1.14c0-3.82.07-7.65 0-11.47 0-1.2.33-1.49 1.49-1.47 4 .07 7.92.06 11.87 0 1 0 1.3.26 1.28 1.27-.06 3.82 0 7.65 0 11.47 0 .69-.19 1.47 1 1.42a.8.8 0 0 1 .73 1 .89.89 0 0 1-.91.81zm-54.27-14.23c-2.53.05-5.06 0-7.59 0-.88 0-1.25.18-1.24 1.16v12.69c0 .89.3 1.14 1.15 1.12 2.57 0 5.14-.06 7.72 0 1 0 1.2-.33 1.17-1.23-.06-2.07 0-4.15 0-6.22v-6.35c.03-.94-.3-1.19-1.21-1.17zm-17.31-12.87zm29.1-.6a1.11 1.11 0 0 0 .95.54h10.89a1.12 1.12.........完整代码请登录后点击上方下载按钮下载查看