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 0 0 0 1.11-1.11v-10.04a1.12 1.12 0 0 0-1.11-1.11h-10.9a1.1 1.1 0 0 0-.69.25 1.12 1.12 0 0 0-.32.41 1.1 1.1 0 0 0-.1.46v10a1.1 1.1 0 0 0 .17.6zm12.65-4.28v-1.79c-.01.6 0 1.2 0 1.79z" }), /*#__PURE__*/
      React.createElement("rect", { width: "11.01", height: "12.27", x: "495.92", y: "346.44", fill: "none", rx: "1.11", ry: "1.11" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M508.41 387.77h-13.82c-.5 0-1.09-.17-1.11.72s.52.76 1.06.76h13.87c.5 0 1.09.18 1.1-.71s-.54-.77-1.1-.77zm29.95-51.71c0-.4-.08-.71-.57-.71h-50c-.48 0-.58.32-.57.72s.12.61.52.63h50.07c.38.03.6-.21.55-.64zm.55 17.22c3.65 1.39 7.23 3 10.85 4.4 5.32 2.12 10.66 4.19 16 6.27.33.13.78.56 1 0a.82.82 0 0 0-.5-1.19c-.38-.14-.73-.32-1.1-.48l-17.75-7.54-9.73-4.11c-.4 1.37-.1 2.14 1.23 2.65zm20.15 4.82c.61 0 .32-.51.35-.79a9.21 9.21 0 0 0 0-1.19v-1.72c0-.45-.24-.63-.67-.62s-.62.14-.63.52v3c.04.6.5.79.95.8zm-58.56-47.36c.38 0 .85.13.89-.49 0-.32 0-.64.48-.65s.62.25.62.67.26.51.62.48.4-.36.45-.67c.25-1.52-.83-1.19-1.66-1.2h-1.33c-.7.07-.45.65-.47 1s-.14.82.4.86zm-1.63 4.83h5.71c.5 0 .85-.1.87-.72a1.29 1.29 0 0 0 0-.41 2.27 2.27 0 0 0 0-.39c0-1-.26-1.36-.87-1.35h-5.71c-.62 0-.88.37-.86 1.36a2.26 2.26 0 0 0 0 .39 1.33 1.33 0 0 0 0 .41c.01.6.4.71.86.71z" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M507.73 387.77H495.5a.51.51 0 0 0 0 1h12.23a.51.51 0 1 0 0-1zm-14.92-54.54h39.9c1.91 0 1.91 0 1.62-1.94-.08-.57-.23-1.13-.28-1.7s-.45-2.3-.57-3c-.18-1-.35-1.92-.53-2.87-.42-2.25-.42-2.25-2.68-2.52a3.13 3.13 0 0 1-.4-.05.44.44 0 0 1-.34-.5.43.43 0 0 1 .37-.47c.31 0 .63 0 .93-.06.49-.09 1.39.32 1.27-.64-.1-.72.17-1.81-1.32-1.81q-17.75.07-35.5 0a1.13 1.13 0 0 0-1.32 1.12c-.35 2.1-.75 4.19-1.17 6.27-.48 2.37-.5 2.36 1.82 2.51.38 0 .89-.11.91.49s-.55.55-1 .57c-2.61.13-2.62.13-3 2.77a1.79 1.79 0 0 1 0 .4c-.51 1.35.21 1.44 1.29 1.43zm12.45 38.42c-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-4.76-60.91h2.61s.4-.36.45-.67c.25-1.52-.83-1.19-1.66-1.2h-1.33c-.7.07-.45.65-.47 1s-.14.83.4.87zm65.35 55.59q-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-26.94-13.05c3.65 1.39 7.23 3 10.85 4.4 5.32 2.12 10.66 4.19 16 6.27.33.13.78.56 1 0a.82.82 0 0 0-.5-1.19c-.38-.14-.73-.32-1.1-.48l-17.75-7.54-9.73-4.11c-.4 1.37-.1 2.14 1.23 2.65zm-.55-17.22c0-.4-.08-.71-.57-.71h-50c-.48 0-.58.32-.57.72s.12.61.52.63h50.07c.38.03.6-.21.55-.64z" }), /*#__PURE__*/
      React.createElement("path", { fill: "none", d: "M535.41 366.81v-3a1.38 1.38 0 0 0 0-.15c0-7.82-.05-15.65-.07-23.47.21-1-.13-1.3-1.16-1.3h-42.91c-1 0-1.42.3-1.16 1.31 0 .4-.07.8-.07 1.19v21.79a1.46 1.46 0 0 0-.06.3v24.5c0 .79-.09 1.54 1.12 1.38.86-.11 2 .3 1.71-1.3-.11-.62.07-1.07.83-.94 1 .17 1.15-.33 1.14-1.21v-14.69c0-1 .15-1.39 1.28-1.36 3.6.08 7.21.08 10.82 0 1.08 0 1.31.31 1.3 1.34-.05 4.9 0 9.79 0 14.69 0 .84.08 1.41 1.11 1.23.83-.14 1.17.23 1 1-.2 1.06.3 1.21 1.25 1.21h15.36c2.89-.07 8 .18 8.36-.37s.3-2.73.29-4.18v-17.5a1.35 1.35 0 0 0-.14-.47z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M571.41 389.78c-.73-.11-1.76.37-2.11-.29a5.71 5.71 0 0 1-.14-2.49c0-1.29.05-2.57.08-3.86v-15.47c.54.2.94.38 1.36.5a1.072 1.072 0 1 0 .77-2 8.84 8.84 0 0 0-1.48-.59c-1.25-.3-1.91-1-1.64-2.33.19-1-.27-1.44-1.15-1.78-1.82-.7-3.59-1.55-5.41-2.24-.86-.33-14.79-6.28-15.29-6.49q-4-1.74-8.1-3.42a1 1 0 0 1-.75-1.07v-8.55c0-.72.23-.89.92-.9 2 0 2-.07 2-2.13v-1.07c0-2.39 0-2.43-2.35-2.38-.94 0-1.28-.24-1.45-1.2-.89-5-1.92-9.95-2.8-14.94-.22-1.24-.76-1.59-2-1.59H510.1c-2.44 0-2.44 0-2.44-2.41 0-2.24 0-2.26-2.36-2.38-.53 0-.77-.11-.81-.72-.15-2.24-.18-2.24-2.44-2.24h-1.34c-1.72 0-1.79 0-1.71 1.73 0 1-.23 1.29-1.24 1.24-1.61-.08-1.76.14-1.78 1.73v1.2c0 1.84 0 1.92-1.81 1.81-1.42-.09-1.93.46-2.17 1.83-.88 5-1.88 10-2.82 14.93-.11.58-.19.93-.94 1-3.3.16-3.3.19-3.29 3.48v.53c-.06 1.11.41 1.74 1.57 1.57s1.37.35 1.37 1.41v40.7l-.09 10.29c13.35 0 27.52 0 40.87-.1 1.43 0 16.18.06 17.88.07 8 .05 16 0 24 0h.8a.65.65 0 0 0 .64-.71c.07-.42-.2-.6-.58-.67zm-70.82-80.9h1.33c.83 0 1.91-.32 1.66 1.2-.05.31 0 .64-.45.67s-2.23 0-2.61 0c-.54 0-.42-.5-.41-.82s-.25-.97.45-1.04zm-2.56 5.15c0-1 .24-1.37.86-1.36h5.71c.61 0 .88.36.87 1.35a2.27 2.27 0 0 1 0 .39 1.29 1.29 0 0 1 0 .41c0 .62-.36.72-.87.72h-5.71c-.5 0-.85-.09-.87-.71a1.33 1.33 0 0 1 0-.41 2.26 2.26 0 0 1-.02-.39zm-6.46 17.79a1.79 1.79 0 0 0 0-.4c.37-2.64.37-2.64 3-2.77.41 0 1 .13 1-.57s-.54-.47-.91-.49c-2.32-.14-2.3-.14-1.82-2.51.42-2.08.82-4.17 1.17-6.27a1.13 1.13 0 0 1 1.32-1.12h35.5c1.49 0 1.22 1.08 1.32 1.81.13 1-.77.55-1.27.64-.3.05-.62 0-.93.06a.43.43 0 0 0-.37.47.44.44 0 0 0 .34.5 3.13 3.13 0 0 0 .4.05c2.26.28 2.26.28 2.68 2.52.18 1 .35 1.92.53 2.87.12.67.52 2.29.57 3s.19 1.13.28 1.7c.29 1.94.29 1.94-1.62 1.94h-39.95c-1.08-.01-1.8-.1-1.26-1.43zm16.18 57H495.5a.51.51 0 0 1 0-1h12.23a.51.51 0 1 1 0 1zm-1.34-9.64v6.22c0 .9-.21 1.25-1.17 1.23-2.57-.06-5.14 0-7.72 0-.85 0-1.16-.23-1.15-1.12v-12.69c0-1 .36-1.17 1.24-1.16 2.53 0 5.06.05 7.59 0 .91 0 1.25.23 1.22 1.18-.01 2.11-.01 4.22-.01 6.34zm29 5.59c0 1.44.1 3.63-.29 4.18s-5.47.3-8.36.37H511.4c-.94 0-1.45-.15-1.25-1.21.15-.81-.18-1.18-1-1-1 .18-1.12-.39-1.11-1.23v-14.69c0-1-.22-1.36-1.3-1.34-3.6.07-7.21.08-10.82 0-1.13 0-1.28.39-1.28 1.36v14.69c0 .88-.15 1.37-1.14 1.21-.77-.13-.94.32-.83.94.29 1.6-.85 1.19-1.71 1.3-1.21.15-1.12-.59-1.12-1.38v-24.5a1.46 1.46 0 0 1 .06-.3v-21.79c0-.4 0-.8.07-1.19-.26-1 .15-1.32 1.16-1.31h42.91c1 0 1.37.33 1.16 1.3 0 7.82 0 15.65.07 23.47a1.38 1.38 0 0 1 0 .15v3a1.35 1.35 0 0 1 .07.46c.13 5.79.15 11.57.15 17.51zm-22.83-48h-24.87c-.4 0-.51-.28-.52-.63s.09-.71.57-.72h50c.49 0 .57.31.57.71s-.17.67-.62.66h-25.05zm25 13.9l9.73 4.11 17.81 7.54c.37.16.73.34 1.1.48a.82.82 0 0 1 .5 1.19c-.25.56-.7.13-1 0-5.33-2.08-10.67-4.15-16-6.27-3.63-1.44-7.21-3-10.85-4.4-1.29-.55-1.59-1.32-1.23-2.69zm29.36 37.56c0 .82-.27 1.06-1.07 1.06h-19.9c-2.77 0-8.16 0-8.32-.15-.32-.22-.1-2.53-.15-3.79V356.7c-.11-.93-.12-1.56 1.2-1q13.52 5.39 27.09 10.66c.95.37 1.36.86 1.08 1.86 0 2.84.12 5.69.13 8.53.06 3.82-.01 7.61 0 11.44z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M515.04 360.65a30.1 30.1 0 0 1 5-.11c3.95 0 7.9-.14 11.85.09 1.21-.55 1.52-1.45.59-1.85s-.8-.88-.8-1.54v-11.47c0-.95-.3-1.2-1.22-1.19h-14.54c-1 0-1.28.29-1.26 1.28.05 3.87 0 7.74 0 11.6 0 .36.23.87-.25 1.07s-1.07.53-.93 1.24 1.01.68 1.56.88zm1.76-6.88v-3.33a1.25 1.25 0 0 1 .09-.61v-2.26a1.1 1.1 0 0 1 .1-.46.69.69 0 0 1 .32-.41 1.1 1.1 0 0 1 .69-.25h10.89a1.12 1.12 0 0 1 1.11 1.11v10a1.12 1.12 0 0 1-1.11 1.11h-10.9a1.11 1.11 0 0 1-.95-.54.88.88 0 0 1-.26-.81c.07-1.15.02-2.35.02-3.55zm15.72 30.21c-.84-.36-.8-.88-.8-1.54v-11.47c0-.95-.3-1.2-1.22-1.19h-14.54c-1 0-1.28.29-1.26 1.28.05 3.87 0 7.74 0 11.6 0 .36.23.87-.25 1.07s-1.07.53-.93 1.24.93.69 1.49.89a30.11 30.11 0 0 1 5-.11c3.95 0 7.9-.14 11.85.09 1.29-.55 1.55-1.46.66-1.86zM530 382.8a1.12 1.12 0 0 1-1.11 1.11h-10.9a1.11 1.11 0 0 1-.95-.54.88.88 0 0 1-.26-.81c.06-1.19 0-2.39 0-3.59v-3.33a1.25 1.25 0 0 1 .09-.61v-2.28a1.1 1.1 0 0 1 .1-.46.69.69 0 0 1 .32-.41 1.1 1.1 0 0 1 .69-.25h10.89a1.12 1.12 0 0 1 1.11 1.11zm-36.04-22.23h14.72l.93-.09a.89.89 0 0 0 .87-.85.8.8 0 0 0-.73-1c-1.18 0-1-.73-1-1.42v-11.47c0-1-.29-1.28-1.28-1.27-4 .05-7.92.07-11.87 0-1.16 0-1.52.27-1.49 1.47.08 3.82 0 7.65 0 11.47 0 .41.3 1.08-.5 1.14s-1.29.27-1.22 1.07.94.83 1.57.95zm2-13a1.12 1.12 0 0 1 1.11-1.11h8.78a1.12 1.12 0 0 1 1.11 1.11v10a1.12 1.12 0 0 1-1.11 1.11h-8.78a1.12 1.12 0 0 1-1.11-1.11zm63.71 36.5c-1.18 0-1-.73-1-1.42v-11.47c0-1-.29-1.28-1.28-1.27-4 .05-7.92.07-11.87 0-1.16 0-1.52.27-1.49 1.47.08 3.82 0 7.65 0 11.47 0 .41.3 1.08-.5 1.14s-1.29.27-1.22 1.07.91.8 1.54.91h14.76l.93-.09a.89.89 0 0 0 .87-.85.8.8 0 0 0-.74-.96zm-2.82-1.07a1.12 1.12 0 0 1-1.11 1.11h-8.78a1.12 1.12 0 0 1-1.11-1.11v-10a1.12 1.12 0 0 1 1.11-1.11h8.78a1.12 1.12 0 0 1 1.11 1.11zm-40.77-61.68h6.53c.39 0 .86.06.88-.54s-.4-.74-.89-.74h-6.53c-.45 0-.8.1-.79.65s.36.63.8.63zm-17.83 6.87c0 .5.43.49.79.49h6.78c.38 0 .87.08.88-.52s-.46-.55-.85-.55h-6.78c-.41-.04-.86-.04-.82.58zm-.63-7.47c0 .5.28.49.51.49h4.44c.25 0 .57.08.58-.52s-.3-.55-.56-.55h-4.44c-.26 0-.55-.02-.53.58zm20.55 7.47c0 .5.58.49 1.06.49h9.18c.52 0 1.17.08 1.19-.52s-.62-.55-1.15-.55h-9.16c-.56-.04-1.17-.04-1.12.58zm-11.13-3.1h11.92c.66 0 1.4 0 1.47-.49s-.61-.57-1.31-.57h-12.17c-.69 0-1.39 0-1.35.55s.81.51 1.44.51z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M517.05 358.18a1.1 1.1 0 0 1-.17-.57v-7.77a1.25 1.25 0 0 0-.09.61c.06 1.11 0 2.22 0 3.33v3.59a.88.88 0 0 0 .26.81zm-.07-11.08a1.12 1.12 0 0 1 .32-.41.69.69 0 0 0-.32.41zm12.7 8.6v-3.58 1.79s.01 1.19 0 1.79zm-41.75-.91v4-3.7c.02-.11.01-.2 0-.3zm2.1 9.64a3 3 0 0 1 0-.51 3.07 3.07 0 0 0 0 .51z" }))), /*#__PURE__*/


      React.createElement("g", { className: "house", id: "house-three", ref: h => this.houseThree = h, "data-project": 2, onClick: e => this.mouseAction(e) }, /*#__PURE__*/
      React.createElement("g", { id: "bg-fill-5", className: "bg-fill" }, /*#__PURE__*/
      React.createElement("path", { fill: "#18a9e2", d: "M368.86 301.21h48.57v89.63h-48.57z" }), /*#__PURE__*/
      React.createElement("path", { fill: "#0d729e", d: "M366.93 305.74h51.61v3.66h-51.61zm0 17.09h51.61v3.66h-51.61zm0 17.09h51.61v3.66h-51.61zm0 16.91h51.61v3.66h-51.61zm0 17.26h51.61v3.66h-51.61zm14.71 7.86h22.89v9.23h-22.89zm9.09-82.94h17.08v2.75h-17.08z" })), /*#__PURE__*/

      React.createElement("g", { id: "stroke-5", "data-name": "stroke" }, /*#__PURE__*/
      React.createElement("path", { fill: "#333", d: "M419.56 389.74c-1 0-1.5-.24-1.48-1.36.05-2.82 0-5.65 0-8.47 0-.32 0-.8.17-.92 2.05-1.33.78-3.37 1.11-5.06 0-.15 0-.39-.08-.47-2.19-1.77-.91-4.2-1.18-6.33a29.9 29.9 0 0 1 0-3.74c0-.76-.11-1.51.83-1.91.52-.22.52-.82.46-1.3-.2-1.66.65-3.47-1.15-4.91-.45-.36-.3-1-.32-1.54q0-1.19-.05-2.39v-4.02c0-1 .07-2.11.94-2.73a1.37 1.37 0 0 0 .56-1.43c-.22-1.61.79-3.51-1.14-4.76-.23-.15-.14-.82-.14-1.25v-6.85c0-1.1-.23-2.17 1-3 .83-.57.35-4.74-.49-5.43a1.45 1.45 0 0 1-.51-1.28v-8.48c0-.53-.08-1.21.66-1.29 1.34-.14 1.38-1.06 1.28-2-.16-1.46.67-3.14-1.1-4.29-.51-.33-.19-1.34-.18-2 0-1.1-.46-1.59-1.57-1.57h-6.69c-.95 0-1.6-.18-1.57-1.32s-.63-1.26-1.51-1.26h-16c-.89 0-1.54.27-1.46 1.28.1 1.3-.67 1.34-1.64 1.34h-19.09c-2.06 0-2.11.06-2.14 2.1 0 .79.12 1.54-.85 2.07s-.49 1.5-.43 2.27c.11 1.34-.84 3.21 1.62 3.55.38.05.31.64.31 1v8.65c0 .32 0 .81-.17.92-2.07 1.33-.78 3.37-1.11 5.05 0 .15 0 .4.08.47 2..........完整代码请登录后点击上方下载按钮下载查看