wolodymyr
April 17, 2021, 5:53pm
1
Hi everybody,
I am planning a very graphic-based game, also as an exercise to learn the possibilities of SVG in SugarCube.
Is it possible to address a single path in an SVG via CSS? E.g. give a path a specific effect when beeing hovered over or blur/unblur specific paths within a SVG graphic.
Can a path within a SVG graphic serve as a twine link? E.g. If I had the drawing of a desk with drawers could the outline of one drawer be used as a link to another passage?
Can properties of a specific path be animated using CSS? Like a rotation or the position of certain vertices?
Thank you for your advice!
1 Like
Regarding 1 & 3. CSS is generally applicable to SVGs, so my assumption would be yes.
As to 2. Definitely. SugarCube applies the same attribute processing to SVGs as it does to HTML. SVGs also have their own anchor tag (<a>…</a>) that works more or less the same as the HTML anchor tag. Thus, you can simply use the data-passage attribute to make SVG anchors into passage links.
1 Like
HiEv
April 17, 2021, 6:42pm
4
FYI - InkScape leaves a lot of extra junk in the SVG file. I would recommend running the SVG files you get from InkScape through SVG Minifier and then SVG Optimizer to trim the “fat” off the files.
1 Like
wolodymyr
April 23, 2021, 12:07pm
6
Just in case this could be of use to somebody, here is the result of my first try:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="297mm" height="210mm" version="1.1" viewBox="0 0 297 210" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<a data-passage="mainDrawer"><path id="mainDrawer" class="interactiveItem" d="m177.35 51.083c-13.943-0.0246-27.893 0.35565-41.831 0.48679-4.7914 0.37948-10.7-0.76086-14.877 0.60926 0.36549 2.7416 0.11056 5.5405 0.0941 8.2987-0.0764 2.557-0.15303 5.1139-0.22945 7.6708 18.17-0.83542 36.356-1.0984 54.545-0.83096 11.306-5e-5 22.679 0.474 33.938 0.55294 1.5057-4.9327 1.017-10.372 1.5193-15.543-1.8455-0.97648-5.6266-0.10081-8.0739-0.6227-8.3564-0.44727-16.72-0.60744-25.085-0.62218zm-47.396 6.0808c4.1396 2.2628 9.7248 4.7689 14.632 1.157 2.8591 3.3444-9.5404 5.643-12.71 2.0851-0.89811-0.62509-2.962-1.9074-1.9218-3.2422zm47.418 0.10387c4.8816 1.8294 10.654 3.6666 16.315 2.2784 1.8041-1.9127 9.4639-3.1818 4.3646 0.37258-5.4571 2.6327-12.301 2.6244-17.925 0.53899-0.95209-0.62469-3.5805-1.6482-2.7544-3.19z"/></a>
<a data-passage="bottomDrawer"><path id="bottomDrawer" class="interactiveItem" d="m104.49 94.057c-8.1697 0.01023-16.356 0.39817-24.475 1.0788l-0.51539 0.36257c-0.3691 7.4596 0.60541 17.154 1.1318 24.612 3.2768 3.1705 12.327-1e-3 18.325 0.44384 11.49 0.2583 14.281 0.65255 13.304-2.3464 0.0971-7.7222 0.89048-23.311-0.0814-23.371-2.12-0.13008-4.9656-0.78335-7.6888-0.77994zm-6.8408 7.5473c0.08461 3.2e-4 0.16931 4e-3 0.25383 0.0125 0.7102 0.0682 1.376 0.41586 2.0296 0.75016 0.35347 0.22784 0.66271 0.38662 0.96235 0.72631 0.51152 0.57992 0.75231 1.4078 0.97339 2.2118 0.15705 0.83127 0.3851 1.7071 0.32392 2.5779-7e-3 0.11325-0.0327 0.22355-0.0491 0.33518-0.10973 0.4245-0.35964 0.70328-0.65115 0.92041-1.8871 1.4058-1.2191 1.0782-2.0897 1.4842-0.16555 0.0888-0.33433 0.16097-0.49883 0.25303l0.93532-0.95435c-0.07599 0.057-0.26046 0.19154-0.19589 0.14228 0.08398-0.064 0.13186-0.0978 0.20968-0.15658l0.43649-0.44532c0.0227-0.0452 0.0444-0.0914 0.0679-0.13575 0.0248-0.0971 0.0593-0.19066 0.0739-0.29111 0.11856-0.81545-0.12404-1.7281-0.261-2.5118-0.39123-1.4352-0.69874-2.1406-1.8254-2.7756-0.48398-0.24689-0.74927-0.41182-1.2697-0.54891-0.78662-0.20722-1.572-0.10903-2.3154 0.23932-0.9185 0.95552-1.6863 2.1433-2.2183 3.5066-0.16876 0.59066-0.40165 1.1336-0.32722 1.7914 0.02601 0.22989 0.12839 0.43552 0.2152 0.63882 0.26531 0.62146 0.66165 1.0788 1.1373 1.4187 0.17301 0.0938 0.34165 0.20301 0.51925 0.281 0.71935 0.31612 1.5432 0.40377 2.2922 0.18694 0.28694-0.38184 0.54011-0.80717 0.7797-1.2377h5.51e-4l1.8204-1.0556c-0.30636 0.57564-0.64435 1.1354-1.0363 1.6188-0.10886 0.13425-0.21295 0.27981-0.34047 0.38281-0.67976 0.54886-1.3841 1.0453-2.0759 1.5682-0.16932 0.0726-0.33292 0.17169-0.50766 0.2179-0.81307 0.21496-1.741 0.0925-2.5174-0.27208-0.18371-0.0862-0.35762-0.20429-0.53636-0.3066-0.49612-0.37862-0.91898-0.87339-1.2007-1.5324-0.09292-0.21737-0.19924-0.43819-0.2301-0.68347-0.09948-0.78986 0.10839-1.2494 0.30184-1.9837 0.14789-0.35275 0.27749-0.71912 0.44365-1.0579 0.55305-1.1277 1.5213-2.5187 2.4125-3.2185 0.73037-0.57351 1.4843-1.0947 2.2265-1.642 0.54718-0.27522 1.1387-0.45715 1.731-0.45486zm2.2034 8.3028-0.0138 0.0143c0.0037-2e-3 0.0062-4e-3 0.0094-7e-3 0.03412-0.0258 0.06995-0.0551 0.10539-0.0827-0.03607 0.027-0.06347 0.0472-0.10098 0.0756z"/></a>
<a data-passage="middleDrawer"><path id="middleDrawer" class="interactiveItem" d="m108.11 72.764c-2.3802-0.02638-5.2878-0.43766-7.595-0.41179-6.7906 0.6866-14.453-0.78202-20.698 1.4299l-0.79245 1.0713-0.09849 0.67489c0.82621 5.8706-0.99815 12.43 1.0407 17.811 9.9013-0.0794 20.673 0.3435 30.577 0.59672 6.65-1.4392 0.74706-8.0835 2.9875-15.508 0.67942-4.6183-2.3634-5.5963-5.4221-5.6643zm-9.5642 5.2545c0.06956-0.0017 0.13891-8.57e-4 0.2083 0.0036 1.887 0.12203 2.9447 1.4002 3.8326 2.3606 0.75737 1.0044 1.3673 2.167 0.77093 3.2887-0.11377 0.21398-0.30418 0.40622-0.45623 0.60927-0.24137 0.19112-0.45501 0.39925-0.72395 0.57309-0.47289 0.30566-1.286 0.6665-1.856 0.88677-2.4735 0.95576-3.9648 1.7025-6.3933 2.1844l3.6181-1.8769c0.23681-0.054 0.47017-0.1144 0.69-0.17467 0.12132-0.083 0.27072-0.18739 0.51338-0.35088 0.16627-0.17748 0.3709-0.34119 0.49924-0.53227 0.68986-1.0271 0.12584-2.1462-0.57169-3.0861-0.81553-0.8976-1.8017-2.0582-3.5971-2.0552-0.02355 4.5e-5 -0.04677 0.0023-0.07021 0.0031-0.52179 0.46836-0.92179 0.99331-1.2005 1.5498-0.08051 0.26426-0.20062 0.52443-0.2417 0.79272-0.12179 0.79467 0.13069 1.6626 1.0692 2.1978l-3.93 1.6852c-0.96711-0.67391-1.2728-1.5881-1.1626-2.5063 0.03439-0.28673 0.14506-0.56704 0.21736-0.8506 0.15368-0.28371 0.2735-0.5766 0.46075-0.85111 1.3751-2.016 4.5731-3.3003 7.6969-3.8101 0.20868-0.0092 0.41801-0.03582 0.6266-0.04083zm-1.3839 8.3948c-0.37772 0.1495-0.54828 0.2148-1.0602 0.41961-0.31852 0.12744 0.64716-0.2437 0.96056-0.37672 0.04491-0.01905 0.05915-0.02571 0.09957-0.04289z"/></a>
<a data-passage="topDrawer"><path id="topDrawer" class="interactiveItem" d="m109.73 51.112c-0.44164 0.0062-0.92712 0.05178-1.4614 0.14056-9.241-0.14863-18.616 0.20646-27.731 1.2738l-0.28487 0.48317-0.22844 1.016c0.04214 5.6245-1.69 12.794 1.3906 17.489 7.2394-0.01989 14.507 0.12337 21.742 0.62942 6.4163 1.7706 12.576-0.95133 10.495-7.9577-0.62826-4.4051 2.703-13.167-3.9218-13.074zm-8.5798 5.9965c0.3169 0.0023 0.53745 0.03729 0.9326 0.07906 0.36746 0.07215 0.71113 0.11208 1.0266 0.2775 0.74762 0.39195 0.85532 1.0788 0.93592 1.6785 6e-3 1.0184-0.51644 1.9495-1.129 2.85-0.44156 0.61777-0.95059 1.2078-1.5355 1.7622-0.2438 0.22384-0.53625 0.42102-0.88446 0.56224-1.8683 0.7577-2.5453 1.2776-4.179 1.5188l2.1606-1.171c-0.23503 0.09665-0.54594 0.22697-0.83302 0.34675-0.06115 0.03349-0.11736 0.06327-0.25334 0.12092-0.03092 0.01312-0.04357 0.01557-0.09569 0.03566 0.04935 0.01238 0.09535 0.02578 0.14603 0.03772l-3.102 1.465c-0.63348-0.21107-1.3009-0.41292-1.8646-0.71314-0.45541-0.24254-0.7437-0.47739-1.1433-0.76843-0.79494-0.66717-1.7817-1.6181-1.7363-2.5414 0.0097-0.19915 0.09597-0.39275 0.14382-0.58911 0.60795-1.2149 1.8882-2.1024 3.4483-2.729 1.3443-0.53997 2.7074-1.0559 4.0611-1.5839 1.1376-0.27977 2.33-0.5641 3.5423-0.6289 0.13701-0.0073 0.25336-0.01008 0.35898-0.0093zm-3.8543 8.0605c-0.0057-0.0014-0.01097-0.0032-0.01659-0.0047-0.08761 0.03677-0.14246 0.05889-0.23453 0.09767-0.08124 0.03421 0.11442-0.04035 0.25112-0.09302zm-0.01659-0.0047c0.13653-0.0573 0.23966-0.09937 0.36563-0.15193 0.09432-0.05166 0.17114-0.10508 0.34073-0.22479 0.60711-0.53532 1.1333-1.1085 1.5787-1.7193 0.62887-0.86216 1.226-1.7401 1.2512-2.7337-0.10351-0.98029-0.27031-1.4483-1.7252-1.6464-1.4982-0.10534-2.9363 0.17456-4.325 0.55294-0.7573 0.46375-1.3659 1.0288-1.7573 1.6976-0.06062 0.17287-0.15694 0.34107-0.18198 0.51831-0.12096 0.85627 0.8589 1.782 1.5964 2.39 0.89784 0.61153 1.7008 1.0249 2.857 1.3172zm-0.69696-6.7779c0.02025-0.01847-0.76366 0.30718-1.0388 0.43667-0.14376 0.06765-0.28374 0.13788-0.41984 0.21135 0.46846-0.20264 0.93678-0.40533 1.3967-0.61753 0.03954-0.01824 0.05906-0.02785 0.06195-0.03049z"/>
<path d="m155.73 45.659c-5.1614-0.0018-10.433-0.0013-15.741 0.0021-25.477 0.01602-51.786 0.09963-70.755 0.32608 0.45158 3.0294 0.77781 7.7463 5.4229 6.6378-0.05872 21.338 0.24765 42.68 0.54828 64.016 1.2317 5.2415-2.8902 13.541 1.7126 16.867 7.1922 3.0541 2.2814-5.3733 5.0043-7.5918 10.38-1.2032 20.875-0.90389 31.314-1.0056 2.0937 1.3066-0.46024 7.2182 1.6614 8.6946 8.6272 0.40104 3.7222-11.115 5.0121-16.349-0.81533-15.28-0.64237-30.58-0.57877-45.877 5.4347-0.22559 10.849-0.77831 16.281-1.0397 24.822-0.65108 49.661 0.21469 74.476 0.85266 3.1834 4.6872 0.60812 12.884 0.95239 18.881-1.3649 13.619-1.2291 27.316-0.22427 40.955 0.094 3.4399 8.3182 1.1119 6.5386-2.7828-0.44923-12.996 0.0414-26.001 0.51625-38.995 0.1016-11.775 1.8235-23.531 1.1994-35.299 4.0825-1.1268 3.528-8.1561 3.528-8.1561s-30.738-0.12348-66.868-0.13642zm-57.351 4.4189c0.90572-9.81e-4 1.8118 6.62e-4 2.7177 0.0041 4.3483 0.01667 8.6978 0.07062 13.038 0.0248 0.44963 23.703-0.68966 47.398-0.89865 71.1-10.541 0.21856-21.097 0.23322-31.612 1.0738-3.8906-2.2071-0.9533-10.83-2.1957-15.419-1.2453-14.903-0.77898-17.94 0.26407-47.071 0.07274-2.9566-0.0114-5.9092-0.28267-8.8506 6.296-0.70855 12.629-0.85458 18.969-0.86145zm78.97 0.47646c8.7011 0.01534 17.4 0.18231 26.091 0.64751 2.5454 0.54281 6.4785-0.36812 8.3979 0.6475-0.52245 5.3778-0.0147 11.035-1.5808 16.166-11.711-0.08211-23.539-0.57522-35.299-0.57516-18.918-0.27815-37.833-0.0044-56.731 0.86455 0.0795-2.6595 0.15873-5.3193 0.23823-7.9788 0.0171-2.8688 0.28299-5.78-0.0971-8.6315 4.3436-1.4251 10.489-0.23886 15.473-0.63355 14.497-0.1364 29.006-0.53199 43.508-0.50643z" stroke-width=".33867"/></a>
</svg>
Using paths as links works fine, I could also address the paths with the class “interactiveItem” via CSS. In Inkscape, I had given ids to the respective paths, but those were removed by SVG Minifier, so I readded them later. Thanks again to everybody who helped.
1 Like