svg stroke-dasharray malfunctioning

I've recently delved into the world of SVG's and I find myself scratching my head over the stroke-dasharray issue. I've scoured the web for answers to no avail, leaving me to believe that I'm overlooking something crucial. Despite implementing the stroke-dasharray property, the text remains undashed, unable to achieve the animated effect I desire - a transition from dashed to bold.

#namelogo{
            width: 100%;
            height: auto;
        }
        #namelogo path:nth-child(1){
            stroke-dasharray: 300;
        }
<div class="logo">
            <svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg">
                <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black">
                    <rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/>
                        (SVG paths here...)
                </mask>
                 (SVG paths here with stroke properties)
            </svg>
        </div>

javascripthtmlcsssvg

Answer №1

  1. The path:nth-child(1) selector is targeting any <path> element that is the first child of its parent in the SVG. However, since the first child of the SVG is a <mask> element, and the only other parent element (#namelogo) has a <rect> as its first child, this CSS rule does not match anything specific. To target the second child (first path), you would need to use nth-child(2).
  2. Considering that the mask appears to be used for an outside stroke effect, you may want to restrict the rule from applying to all paths within the mask. In this case, using #namelogo > path:nth-child(2) will limit the rule to only direct children of #namelogo.
  3. Since the paths are white and the background is also white, they are not visible. To make them visible, I changed the SVG background color to red.

#namelogo{
    width: 100%;
    height: auto;
    background-color: red;
}
#namelogo > path:nth-child(2){
    stroke-dasharray: 300;
}
<div class="logo">
<svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black">
    <rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/>
    <path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368...
                            </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the scroll position in HTML by using a fixed navbar with Bootstrap 4

I am currently working on a single-page website with multiple sections. Users can navigate to these sections either by scrolling or by clicking on the navbar links. The issue I am facing is that the Bootstrap 4 navbar is fixed to the top, causing the conte ...

csstwitter-bootstrapbootstrap-4

NG-model not visible to AngularJS Controller's filter

Finally, the code is working perfectly. It's a mystery to me. I created a custom filter to use with ng-repeat. The code is implemented within a Controller ... .controller('makeOrderController', function ($scope, $timeout, $ionicLoading) { ...

javascriptangularjs

Conceal the Vue router on a webpage

How can I hide the vue-router from my login page? I want to remove the menu on the Login page. Is it possible and how would I achieve that? Here is the code for the Login page: Login <template> <div> <h1>Login</h1> ...

javascriptvue.jsvuejs2vue-router

Problem with cloning I-text in FabricJS

After selecting an object in i-text and cloning it, when you double click on the cloned object to start editing, unselecting it may not work as expected. This issue can be observed in the kitchensink example provided at: To replicate this behavior, navig ...

htmlfabricjs

Issue with AngularJS: Unable to add a new property to an object

Here is the Javascript code I am working with in an AngularJS controller: $scope.schedule = {} $scope.selectEquipment = function(equip) { //alert(equip); $scope.schedule.equipment = equip; } I am successfully receiving the equip variable, but fo ...

javascriptangularjs

I encountered an issue where the data I passed to a component ended up being undefined

So here's the scenario: I'm working on a Next.js project where I have a context for modals. In this context, I store modal details in an array called modalBase. Additionally, I fetch data from another context (toolsContext) to pass it to componen ...

javascriptnext.jsaxios

The style properties of Material UI ButtonGroup are not being properly applied

https://i.sstatic.net/apxUH.gif Within a Grid container, I have a Product image with associated buttons. The visibility of these buttons is determined by specific state variables. If the product quantity is 0, an "ADD TO CART" button is displayed; otherwi ...

javascriptreactjsmaterial-uicss-gridbuttongroup

Inject the value of a JavaScript array into an HTML element

Is it feasible to transfer a global javascript array value to an HTML tag, particularly within an img (title) tag? I'm curious if the following is achievable: <img src="_info.gif" height="26" width="37" title=myArray[5]/> If it is possible, p ...

javascriptjqueryhtml

Transitioning smoothly from one specific location to another through a scrolling motion

Imagine having a box that is currently off from its correct position due to tranform:translateX(-200px) https://i.sstatic.net/2Mgwm.jpg Just below the picture, there are two <section>'s displayed - one as a large grey box and the other as a whi ...

javascriptjqueryscrolltranslate

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css

Testing the updated version 18 of Create React APP index.js using Jest

Previously, I had this index.js file created for React version <= 17. import React from 'react'; import ReactDOM from 'react-dom'; import App from './views/App'; import reportWebVitals from './reportWebVitals'; im ...

javascriptreactjsjestjs

What is the process for forming an object from points so that it can be easily integrated into a graphical user interface (GUI)?

I have been following Bruno Simons' Three.js tutorial on Mixing Html with WebGl, specifically the part where you try to attach a text box to a 3D model. I have imported the GUI and set it up, but I am struggling to understand what I need to 'gui. ...

htmlthree.js3dfrontend

Unleash the power of multiple mouse/touch events with OGX.JS!

I am attempting to calculate the distance after a touch or mouse movement over two separate elements using OGX.JS. Utilizing the built-in touch dist function has been successful. this.touch.dist.set({ target: '.box1', cb_move: functio ...

javascriptogx.js

What is the best way to load a database URL asynchronously and establish a database connection prior to the initialization of an Express

My express.js app is set up to run on AWS lambda, with the database URL stored and encrypted in Amazon KMS. To access the URL, decryption using the AWS KMS service is required. // imports import mongoose from 'mongoose'; import serverless from & ...

javascriptnode.jsmongodbexpressmongoose

Streamlining input options with a single label for multiple selections (radio buttons)

$('label').click(function() { id = this.id.split('-'); if (id[0] === '1') { id[0] = '2'; } else { id[0] = '1'; } $('#' + id[0] + '-' + id[1]).prop('chec ...

htmlcssinputradio-buttonlabel

Issue with rendering in Three.js - The final set of points is not displaying

Despite having all the relevant data in the BufferGeometry object, I am facing an issue where the last bunch of points are not being rendered in the THREE.js viewer. This problem arises when using version 85 of the THREE.js library, as some points go missi ...

javascriptthree.jslidar

Having trouble with the JavaScript code for a basic GPA calculator?

I am having issues with my code for a basic grade calculator. Even though I can input numbers, the final grade is not displayed on the screen. Can someone please help me identify what mistake I might be making? Please ignore the Japanese text, as it's ...

javascript

Nodejs image validation not working as expected

I'm currently working on a project using Nodejs and the expressjs framework. My goal is to allow image uploads through an API, but I have two specific requirements: 1) I need to implement validation for the dimensions (height and width) of the image. ...

javascriptnode.jsexpress

Is there a way to include text in a video similar to the style used by PayPal?

PayPal uses the tagline "You Make it, We'll Pay It" displayed on top of a video with a subtle play button located in the corner. By clicking this play button, the video initiates playback and smoothly transitions from a dark overlay to the video itsel ...

javascripthtmlcssvideopaypal